In NVD3 chart how can i use custom tooltip along with having userInteractiveGuideLine true

796 Views Asked by At

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,

1

There are 1 best solutions below

1
Md Johirul Islam On BEST ANSWER

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;
            },