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.

Dionnadionne

possible duplicate of nvd3 piechart.js - How to edit the tooltip? – Breccia

I got it now the line .useInteractiveGuideline(true) is not correct. it should be .useInteractiveGuideline(false). As Customized tooltip can not exist with "useInteractiveGuideline" suggested by user2612936 on #12417008 – Dionnadionne

Thanks shabeer90 for directing to the right post. – Dionnadionne

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';
});

Reunionist

Thanks. This works for angular-nvd3 too. interactiveLayer:{ tooltip: { contentGenerator: function(data) { console.log('tooltip', data); } } } – Kal

This should be the accepted answer... saved me a lot of time as it is not written on the docs. Thanks! – Paediatrics

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

Pruitt

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 '';
                            }
                        });

Holism