Make Nvd3 Pie Chart show percentages with decimals

5
votes

I'm using Nvd3 in an Angular project to draw some charts. I'm using the angular directive from Krispo's (http://krispo.github.io/angular-nvd3/#/).

I am showing a pie chart whose labels show the values in percents, but the values shown are being rounded and displayed without decimals. See an example in the plunker below: http://plnkr.co/edit/jSf1TAkj5rO1S7p5PuJK?p=preview

In the example above, the percentages should be 21,9% and 78% for example.

I can only change the slice value format and not the label, that, in this case, is the percentage.

This is a big issue when I have a slice that is right near 100%, because it should show something like 99,99% instead of showing 100% giving the impression that there is only one slice.

Here is the chart configuration:

chart: {
        type: 'pieChart',
        height: 500,
        x: function(d){return d.key;},
        y: function(d){return d.y;},
        showLabels: true,
        transitionDuration: 500,
        labelThreshold: 0.01,
        legend: {
              margin: {
                 top: 5,
                 right: 35,
                 bottom: 5,
                 left: 0
              }
        },
        labelType: 'percent',
        valueFormat: function(d) {
              return d3.format(',.5f')(d);
        }
 }
3
javascriptangularjsd3.jsnvd3.js

3 Answers

3
votes

It seems the nvd3 library doesn't let you change that: https://github.com/novus/nvd3/blob/master/nv.d3.js#L10490

"percent": d3.format('%')(percent)

if you really need this, maybe add another labelType to the nvd3.js code with what you want

var labelTypes = {
     "key" : getX(d.data),
     "value": getY(d.data),
     "percent": d3.format('%')(percent),
     "percent2digits": d3.format('.2%')(percent)
 };
14
votes

I was researching and the same . Looking into the nv.d3.js code, found that labelType accepts a function,

labelType: function(d){
      var percent = (d.endAngle - d.startAngle) / (2 * Math.PI);
      return d3.format('.2%')(percent);
    }

Passing this as part of the pie chart configuration, gives labels with two decimal points.

0
votes

I suggest you a way to show decimal part of values with labelType('percent'). The trick consist in calculate percentage instead of nvd3 like this for example:

value = (value/tot)*100

In this way you can calculate each percentages and show, for example 3 digit after comma like this:

value = (value/tot)*100).toFixed(3)

I attach a fiddle for clearness

I hope this is helpful

Regards