nvd3 piechart.js - How to edit the tooltip?

Question

I\'m using nvd3\'s piechart.js component to generate a piechart on my site. The provided .js file includes several var\'s, as follows:

var margin = {top: 30,         


        

Answer 1

I have just got the same problem, with nvd3 1.8.1, and this is the solution I've found.

Without the option useInteractiveGuideline you could simply declare your tooltip generating function in chart.tooltip.contentGenerator(function (d){ YOUR_FUNCTION_HERE}):

The argument d is given by nvd3 when calling the tooltip, and it has three properties :

• value: the x-axis value for the cursor position
• index: the index in chart's datum corresponding to the the cursor position
• series: an array containing, for each item in the chart :
  • key: the legend key for that item
  • value: the y-axis value for that item at the cursor position
  • color: the legend color for that item

So here you have an example:

chart.tooltip.contentGenerator(function (d) {
          var html = "
"+d.value+"
 
";

          d.series.forEach(function(elem){
            html += "
"
                    +elem.key+"
 : "+elem.value+"
";
          })
          html += "
"
          return html;
        })

Important note

When the option useInteractiveGuideline is used, the chart.tooltip object isn't used to generate the tooltip, you must instead use the chart.interactiveLayer.tooltip, i.e.:

this.chart.interactiveLayer.tooltip.contentGenerator(function (d) { ... })

I hope the answer is useful for you, even if late.