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] }
]
}]