How to get percentage in nvd3 pie chart tips?

Question

I have an nvd3 pie chart. I get the percentage value as labels, but I want it in a tooltip. Here is the HTML:

<nvd3-pie-chart data="Data1"id="labelTypePercentExample" width="550" height="350" x="xFunction()" y="yFunction()" showLabels="true" pieLabelsOutside="false" tooltips="true" tooltipcontent="toolTipContentFunction()" labelType="percent" showLegend="true"> </nvd3-pie-chart> 

DATA

 Data1=[{ key: "Ongoing", y: 20 }, { key: "completed", y: 0 }]; 

Here is a tooltip function for displaying a key as tooltips.

 $scope.toolTipContentFunction = function(){ return function(key, x, y, e, graph) { return '<h1>' + key + '</h1>' } } 

Answer 1

Here is a jsfiddle that shows the percentage at the tips.

key code: (you need to calculate the total number of all values ​​containing the pie chart)

 var data = [ {"label": "Water", "value": 63}, {"label": "Milk", "value": 17}, {"label": "Lemonade", "value": 27}, {"label": "Orange Juice", "value": 32} ]; var total = 0; data.forEach(function (d) { total = total + d.value; }); var tp = function(key, y, e, graph) { return '<p>' + (y * 100/total).toFixed(3) + '%</p>'; }; 

You also add this line when creating the NVD3 diagram, as you already know:

 .tooltipContent(tp); 

Final result:

Answer 2

Slightly modified @VividD answer.

It is possible (nvd3 v 1.8.1) to change only the value in the tooltip (not all text):

 var total = 0; data.forEach(function (d) { total = total + d.value; }); chart.tooltip.valueFormatter(function(d){ return (d * 100/total).toFixed() + ' %'; }); 

Example: http://jsfiddle.net/mq56p4zk/4/

Answer 3

Like workgena, it did it for me.

 chart.tooltip.valueFormatter(function(d){ return (d +' %'); });