How I can custom a tooltipContent of tooltips using data loaded into "datum" in discreteBarChart nvd3.js?, for example, with the following data Jason, I want to see data3, data4, Data5 in tooltips
JsonData = [
{
key: "Serie1",
values: [
{'Data1': 1,
'Data2': 2,
'Data3': 3,
'Data4': 4,
'Data5': 5
}
]
}
];
Default Tooltip can be modified at dataSeries or dataPoint level. You can add content to be displayed in toolTip using toolTipContent. toolTipContent set at dataPoint will override toolTipContent set at dataSeries level. Default: auto set depending on chart type. toolTipContent can either be literal string or keywords.
External (Custom) Tooltips. Custom tooltips allow you to hook into the tooltip rendering process so that you can render the tooltip in your own custom way. Generally this is used to create an HTML tooltip instead of an oncanvas one. You can enable custom tooltips in the global or chart configuration like so:
The bubble, doughnut, pie, polar area, and scatter charts override the tooltip defaults. To change the overrides for those chart types, the options are defined in Chart.overrides [type].plugins.tooltip.
toolTipContent mentioned at dataSeries applies to all dataPoints unless overwritten by toolTipContent at dataPoint level. While setting toolTipContent, user can use the property names as a keyword.
This is how to do it:
nv.addGraph(function() {
var chart = nv.models.discreteBarChart()
.x(function(d) { return d.Data1 })
.y(function(d) { return d.Data2 })
.tooltips(true)
.tooltipContent(function(key, y, e, graph) {
var data =graph.series.values[y-1];
return '<p> Text1: ' + data.Data3 + '</p>'
+ '<p> Text2: ' + data.Data4 + '</p>'
+ '<p> Text3: ' + data.Data5 + '</p>'
});
d3.select('#chart svg')
.datum(JsonData)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
I came up with something like this, since the graph object has a value attribute:
chart.tooltipContent(function (key, date, e, graph) {
var value = graph.value;
return "<p><strong>" + date + "</strong><br>" + value + "</p>";
});
No need for accessing the series-array I guess.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With