custom tooltip on cumulativeLineChart in nvd3

Question

When I hover on the lines on the cumulative line chart I get a tooltip message x value at some y time. I want to edit this message and add more content.

Since in my values array I have json containing {X:x, Y:y, Z:z, Dt:date} I wish to show a custom message listing X/Y/Z at date.

Answer 1

I'm using nvd3 veraion 1.1.15b.

Calling .tooltip() didn't work for me, but calling .tooltipContent() did, as in the following code:

        var chart = nv.models.pieChart()
            .x(function (d) { return d.file; })
            .y(function (d) { return d.size; })
            .tooltipContent(function (key, y, e, graph) {
                return '<h3>' + key + '</h3>' +
                    '<p>' + e.value.toSizeFmt() + '</p>';
            })

As Andrei points out above, the e parameter provides access to the raw values so you can format them, rather than working with y which is already formatted text. Hope this helps!

Answer 2

If you have not found a proper solution yet, here you try this -

nv.addGraph(function() {
    var chart = nv.models.cumulativeLineChart().x(function(d) {
        return d[0]
    }).y(function(d) {
        return d[1]
    }).color(d3.scale.category10().range()).tooltip(function(key, x, y, e, graph) {
        return '<h3>' + key + ' Custom Text Here ' + x + '</h3> here' + '<p> or here ,' + y + '</p>'
    });
});

Hope it helps.