NVD3 TooltipContent Does not work

Question

I am using NVD3 library for my project and i have written 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";
            });

Expected output should be to show hello on mouse over. But i dont get that, instead i get the default tooltip.

Please let me know the mistake i am doing.

Answer 1

It's now possible to have custom content with interactive guidelines as of 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 method chart.tooltip.contentGenerator() instead of .tooltipContent()

For example:

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

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

Answer 3

Could you please create a fiddle or plunkr for it? Below is implementation of our project code, it returns an html element an works well:

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