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

Just override in this way it will work definitely

function tooltipContent(key, y, e, graph) {
            return '<h3>' + key + '</h3>' +'<p>' + y + '</p>' ;
        }

Or

tooltipContent(function(key, y, e, graph) { return 'Some String' })

Answer 2

Customized tooltip can not exist with "useInteractiveGuideline".

Answer 3

If you happen to use the Angular NVD3 wrapper, the way to set the custom message is through chart options, simply:

$scope.options = {
  chart: {
  ...
  tooltip: {
      contentGenerator: function(d) {
          return d.series[0].key + ' ' + d.series[0].value;
      }
  },
  ...
  }
};