nvd3.jsangular-nvd3angularjs-nvd3-directivesng2-nvd3

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


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,


Solution

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