nvd3 piechart.js - How to edit the tooltip?
Solution 1:
Just override in this way it will work definitely
function tooltipContent(key, y, e, graph) {
return '<h3>' + key + '</h3>' +'<p>' + y + '</p>' ;
}
Or
tooltipContent(function(key, y, e, graph) { return 'Some String' })
Solution 2:
I have just got the same problem, with nvd3 1.8.1, and this is the solution I've found.
Without the option useInteractiveGuideline
you could simply declare your tooltip generating function in chart.tooltip.contentGenerator(function (d){ YOUR_FUNCTION_HERE})
:
The argument d
is given by nvd3 when calling the tooltip, and it has three properties :
-
value
: the x-axis value for the cursor position -
index
: the index in chart'sdatum
corresponding to the the cursor position -
series
: an array containing, for each item in the chart :-
key
: the legend key for that item -
value
: the y-axis value for that item at the cursor position -
color
: the legend color for that item
-
So here you have an example:
chart.tooltip.contentGenerator(function (d) {
var html = "<h2>"+d.value+"</h2> <ul>";
d.series.forEach(function(elem){
html += "<li><h3 style='color:"+elem.color+"'>"
+elem.key+"</h3> : <b>"+elem.value+"</b></li>";
})
html += "</ul>"
return html;
})
Important note
When the option useInteractiveGuideline
is used, the chart.tooltip
object isn't used to generate the tooltip, you must instead use the chart.interactiveLayer.tooltip
, i.e.:
this.chart.interactiveLayer.tooltip.contentGenerator(function (d) { ... })
I hope the answer is useful for you, even if late.
Solution 3:
Customized tooltip can not exist with "useInteractiveGuideline".
Solution 4:
If you happen to use the Angular NVD3 wrapper, the way to set the custom message is through chart options, simply:
$scope.options = {
chart: {
...
tooltip: {
contentGenerator: function(d) {
return d.series[0].key + ' ' + d.series[0].value;
}
},
...
}
};
Solution 5:
To add to previous answers, sometimes you want to use the data of the series and not only of x
and y
. For instance when
data = {'values': [{'month': 1, 'count': 2}, ...], 'key': 'test' }
For those situations, use
.tooltip(function(key, x, y, e, graph) {
var d = e.series.values[e.pointIndex];
return '<h3>' + e.series.key + '</h3><p>' + d.month.toString() + ...;
});
e.series
is the particular series the mouse is hovering, e.pointIndex
is the index on the values of the series. Here e.series.key == key
, but I used to empathise what is e.series
.