NVD3: Add the 'total' value to stackedAreaChart's interactiveGuideline - d3.js

Question

Is there a simple way to include the TOTAL value in the stackedAreaChart's interactiveGuideline tooltip? It'd be great if I could display total users using this awesome tooltip as well.
If not, what's the cleanest alternative?

Answer 1

You can use interactiveGuideline.tooltip.contentGenerator
https://github.com/novus/nvd3/blob/master/src/tooltip.js#L316
e.g.
chart.multiChart.interactiveLayer.tooltip.contentGenerator(function(d) {
var header = d.value;
var headerhtml =
"<thead><tr><td colspan='3'><strong class='x-value'>" +
header +
"</strong></td></tr></thead>";
var bodyhtml = "<tbody>";
var series = d.series;
series.forEach(function(c) {
var value = (c.value || 0).toFixed(2);
if (
c.key === keyForActualGreaterThanPredicted ||
c.key === keyForActualLessThanPredicted
) {
var diff = Math.abs(c.data.y0 - c.data.y1);
if (diff === 0) {
value = "-";
} else {
value = diff.toFixed(2);
}
}
bodyhtml =
bodyhtml +
"<tr><td class='legend-color-guide'><div style='background-color: " +
c.color +
";'></div></td><td class='key'>" +
c.key +
"</td><td class='value'>" +
value +
"</td></tr>";
});
bodyhtml = bodyhtml + "</tbody>";
return "<table>" + headerhtml + "" + bodyhtml + "</table>";
});