1

I am using nvd3 to plot some chart. I want to show a custom tooltip instead of the default tooltip provided by nvd3. At the same time i want to show the guideline to i.e. the vertical guide line bar. But the problem is when i show the custom tooltip i have to disable the userInteractiveGuideLine.The following code shows what i am actually want

useInteractiveGuideline: false,
tooltip: {
       contentGenerator: function(e) {
         console.log("TOOLTIP entered");
        /*Details code here*/
           }
}

So when i make useInteractiveGuideline: false I can see the custom tooltip and can see the custom message TOOLTIP entered but i cant see the vertical guideLine. But when u set useInteractiveGuideline: true i can see the vertical guide line but i cant see the custom tooltip. I cant see the console message also. Is there any solution that i can use custom tooltip along with using useInteractiveGuideline: true,

Programming is Fun
  • 99
  • 7

1 Answers1

1

You can use callback to provide custom tooltip with interactiveUserGuideLine

callback: function(chart) {
                var tooltip=chart.interactiveLayer.tooltip;
                tooltip.contentGenerator(function(d) {
                      //Do custom toltip code here and return
                    });
                return chart;
            },
Md Johirul Islam
  • 5,042
  • 4
  • 23
  • 56
  • I can't get it to work, this is how I create custom tooltip, but no guideline `code useInteractiveGuideline: false, tooltip: { contentGenerator: e => tooltipTemplate(e) }, ` I also tried with the callback, and no luck. `code callback: (chart) => { const tooltip = chart.interactiveLayer.tooltip; tooltip.contentGenerator((e) => { return tooltipTemplate(e); }); return chart; }, ` – Shnigi Feb 20 '18 at 13:05