custom x axis tooltip for nvd3 scatter chart

Question

I am using nvd3 Scatter Chart and I see that the tooltip content can be customized using the following function.

chart.tooltipContent(function (key, x, y, e, graph) {
    return '<p><strong>' + key + '</strong></p>' +
           '<p>' + e.value + ' in the month ' + x + '</p>';
    });

When the mouse moves over the bubble, the custom tooltip content and the x-value and y-value of the point/bubble are highlighted/shown. Instead of displaying the x-axis label, I want to display custom content. How can I do this?

Thanks,

Answer 1

chart.tooltipContent is deprecated in nvd3 now. To use custom content in the tooltip, you will want to use

chart.tooltip.contentGenerator(function(obj) {code to build tooltip})

In order to see what data you have to work with in your function, start by adding this line:

chart.tooltip.contentGenerator(function (obj) { return JSON.stringify(obj)})

and then you'll be able to hover over your data point and see the object you are working with.

Look in src/tooltip.js at the default function used for contentGenerator starting around line 76 to see a great example of the kind of function you could build and pass to contentGenerator

Here is the relevant section in the documentation documentation