How to obtain percentage in tooltips of an nvd3 pie chart?

d3.js, javascript, nvd3.js, pie-chart, svg

Solution

Here is a jsfiddle that demonstrates percentage in tooltips.

The key code is this: (you have to calculate total of all values that comprise 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>';
};

Also, you add this line when you create NVD3 chart, as you already know:

.tooltipContent(tp);

The end result:

Problem

I have an nvd3 pie chart. I am obtaining the percentage value as labels but I want it in the 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 the tooltip function for showing key as tooltip-data. ``` $scope.toolTipContentFunction = function(){ return function(key, x, y, e, graph) { return '<h1>' + key + '</h1>' } } ```

Original source