Data Attributes - novus/nvd3 GitHub Wiki

Many charts have special attributes you can add into your data to affect the chart, this page documents those items.

Custom Symbols

The standard symbol types available are the standard D3 symbol types. You can also add others via nv.utils.symbolMap, where the map is accessed by nv.utils.symbol(). You can see a working example of the custom symbols in the scatterChart code sample.

Mock Example:

[{
  key: 'Key',
  values: [
    { x: [x], y: [value] },
    { x: [x], y: [value] }
  ]
}]
# With Custom Symbols
[{
  key: 'Random Name',
  values: [
    { x: [x], y: [value], shape: 'cross' },
    { x: [x], y: [value], shape: 'cross' }
  ]
}]

Disable tooltip for specific series in a line chart

By setting the disableTooltip option to true on the series object passed to nvd3, you can now disable tooltips for a specific series in LineChart and LineWithFocus chart.

//Old data object example
{
    key: "series1",
    values: []
}

//New data object example
{
    key: "series1",
    values: [],
    disableTooltip: true
}

Don't stack a particular bars in multiBarChart

Add "nonStackable" to the series with a value of true, then when you set it to stacked, those bars should remain unstacked.

Set a series to start off as disabled

Add "disabled" to the series, and it will start off not showing that series, with it unselected in the legend.

Set a series to use a specific color

By default nvd3 will use a d3 color set randomly setting colors to each series of data, but you can manually specify this per series by adding a "color" attribute to the series which consists of the hex color value such as '#FF0000'

Set the width of a line

By default, nvd3 sets the stroke-width attribute of a line to 1.5; you can customize each individual line width by specifying strokeWidth attribute in the chart data:

[{
  key: 'Key',
  strokeWidth: 3.5,
  values: [
    { x: [x], y: [value] },
    { x: [x], y: [value] }
  ]
}]