API Documentation - GerHobbelt/nvd3 GitHub Wiki

Core Functions

Global Objects

nv.utils: Utilities

nv.utils.windowResize

nv.models

nv.models.stackedAreaChart

Common Chart Functions

# chart.color( [values] )

Defines the colors used for chart elements where values is an array of valid CSS or SVG color values. These may be rgb(), rgba(), hsl(), hsla(), hex, or string color values. The colors will repeat if there are more chart elements than colors.

# chart.height( value )

See chart.width

# chart.margin( {values} )

Defines the margin (in pixels) around a chart. Pass an object containing keys and values.

chart.margin({top:10, right:10, bottom:10, left:10})

# chart.options({key: value})

Accepts an object of settings as its sole parameter. Settings correspond to chart functions. Example usage:

var options = {
    showControls: true,
    showLegend: false
}
chart.options(options);

# chart.showXAxis( true | false )

Accepts a boolean true or false value. Shows or hides values and tick marks along the X or horizontal axis.

# chart.showYAxis( true | false )

Accepts a boolean true or false value. Shows or hides values and tick marks along the Y or vertical axis.

# chart.width( value )

Defines the width (or height in the case of chart.height) of the chart (without margins) in pixels as rendered in the SVG document, not the width of the SVG document, itself.

chart.width(960)  
chart.height(720)

Events

Key to modern data visualisation is not only the static visual representation, but also the ability to interact with the data. nvd3.js makes extensive use of d3.js's dispatch event model, providing key entry points enabling interactive charts.

# chart.dispatch

Charts and components of charts that emit events support the chart.dispatch attribute. This provides the necessary hook to enable developers to listen to the desired events.

Different components emit different events (or none at all) depending upon the interactions that are appropriate. Events used within nvd3.js are listed below.

# stateChange

Where a component holds state (e.g.: a series being enabled/disabled) and through interaction the state is changed, this event will fire.

The parameter passed will be an object representing the new state. The state object is specific to the emitting component.

# legendClick

only used by legend component

# legendMouseover

only used by legend component

# legendOut

only used by legend component

# elementClick

Emitted when clicking on a data element (e.g.: a bar in the discreteBar component)

event parameters vary according to the component

# elementDblClick

Emitted when double clicking on a data element (e.g.: a bar in the discreteBar component)

event parameters vary according to the component

# elementMouseover

Emitted when mouse starts hovering over a data element (e.g.: a bar in the discreteBar component)

event parameters vary according to the component

# elementMouseout

Emitted when mouse stops hovering over a data element (e.g.: a bar in the discreteBar component)

event parameters vary according to the component