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

Question

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>'
    }
}

score 7 · Accepted Answer · answered Feb 14 '15 at 17:06

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:

enter image description here

workgena · Answer 2 · 2015-09-22T12:55:40.120

3

Slightly modified @VividD answer.

It is possible(nvd3 v 1.8.1) to modify only the value in tooltip (not all the 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/

edited Sep 22 '15 at 12:55

answered Sep 22 '15 at 12:47

workgena

31
4

Could you please elaborate more your answer adding a little more description about the solution you provide? – abarisone Sep 22 '15 at 13:06

score -1 · Answer 3 · edited Mar 05 '16 at 20:58

-1

Similar to workgena, this did it for me.

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

edited Mar 05 '16 at 20:58

Tunaki

132,869
46
340
423

answered Mar 05 '16 at 20:55

John

536
5
16

This only adds a Percent-Sign behind the value, doesn't look like tha OP wanted. – Martin Schilliger Nov 09 '16 at 09:19

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

3 Answers3