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.

possible duplicate of [nvd3 piechart.js - How to edit the tooltip?](http://stackoverflow.com/questions/12416508/nvd3-piechart-js-how-to-edit-the-tooltip) — shabeer90, Oct 20 '14 at 11:09
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 http://stackoverflow.com/questions/12416508/nvd3-piechart-js-how-to-edit-the-tooltip — Jayendra Gothi, Oct 21 '14 at 08:08

score 14 · Answer 1 · answered Mar 12 '15 at 00:09

14

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

answered Mar 12 '15 at 00:09

Pim

608
1
6
17

Thanks. This works for angular-nvd3 too. `interactiveLayer:{ tooltip: { contentGenerator: function(data) { console.log('tooltip', data); } } }` – Anish Nair Sep 02 '16 at 07:02
This should be the accepted answer... saved me a lot of time as it is not written on the docs. Thanks! – Owen Far Nov 29 '22 at 10:02

Raghotham S · Answer 2 · 2016-10-06T17:43:42.210

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

edited Oct 06 '16 at 17:43

answered Oct 06 '16 at 17:26

Raghotham S

351
3
4

score 0 · Answer 3 · answered Oct 20 '14 at 05:56

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

NVD3 TooltipContent Does not work

3 Answers3

Linked