NVD3 TooltipContent Doesn't Work

Question

I am using the NVD3 library for my project, and I wrote the following code.

var chart = nv.models.lineChart() .useInteractiveGuideline(true) .margin({top: 50, right: 50, bottom: 50, left: 50}) .tooltipContent(function (key, y, e, graph) { console.log("helo"); return "hello"; }); 

The expected result should be to show hello on the mouse. But I do not understand, instead I get a default prompt.

Please let me know the mistake I am making.

Answer 1

Now you can create custom content with interactive recommendations from version 1.8.1 ( https://github.com/novus/nvd3/tree/v1.8.1-alpha ).

 chart.interactiveLayer.tooltip.contentGenerator(function(data) { return 'this is my custom content'; }); 

Answer 2

Starting with nvd3 version 1.8+, use the chart.tooltip.contentGenerator() method instead of .tooltipContent()

For instance:

  chart.tooltip.contentGenerator(function(data) { return '<p>' + data.point.x + '</p>' } 

More details here - https://github.com/novus/nvd3/issues/1359

Answer 3

Could you create a violin or a plank? The following is the implementation of our project code, it returns an html element that works well:

 .tooltipContent(function (key, x, y, e) { if (e.value >= 0) { return '<h3>' + key + '</h3>' + '<p>' + y + ' at ' + x + '</p>'; } else { return ''; } });