I've been trying to display the percentage on a NVD3 Pie Chart but I don't see how to do it... I'm looking for something like this

First of all, is there a graph option or a way to display something inside each part of the Pie Chart? If yes, is there an option to display a percentage instead of the exact values?

Thanks and enjoy your weekend!

I've been trying to display the percentage on a NVD3 Pie Chart but I don't see how to do it... I'm looking for something like this

First of all, is there a graph option or a way to display something inside each part of the Pie Chart? If yes, is there an option to display a percentage instead of the exact values?

Thanks and enjoy your weekend!

• javascript
• d3.js
• pie-chart
• nvd3.js

• I've been seeking in the lengend.js script ans in the pie.js ans pieChart.js scripts but I didn't find anything helpful... As I'm a beginner in JavaScript, I thought I could have miss something :/ – guillaume Commented May 31, 2013 at 15:05

2 Answers 2

As of version 1.1.10 of NVD3, it is possible to adjust the type of the label

Just call chart.pie.labelType("percent"); to label each slice with the corresponding percentage. It is also possible to display the key labelType("key") or value labelType("value") of each slice.

Complete example:

var slices = [
    {name:"Part 1",value:23},
    {name:"Part 2",value:38},
    {name:"Part 3",value:67}
];

nv.addGraph(function() {
    var chart = nv.models.pieChart()
        .x(function(d) { return d.name })
        .y(function(d) { return d.value })
        .color(d3.scale.category10().range())
        .width(300)
        .height(300);

    chart.pie.pieLabelsOutside(false).labelType("percent");

    d3.select("#chart")
        .datum(slices)
        .transition().duration(1200)
        .attr('width', 300)
        .attr('height', 300)
        .call(chart);

    chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });

    return chart;
});

I am assuming you have been able to get the sample NVD3 Pie Chart working.

The only way as far as I know is to edit the pieChart.js. Pull the NVD3 source from here , and under / src / models / open up pieChart.js and add edit :

tooltip = function(key, y, e, graph) {
        return '<h3>' + key + '</h3>' +
               '<p>' +  y + ' % </p>'
      }

Or here is a NVD3 hosted link to the pieChart.js , edit line 19 to look like this '<p>' + y + '</p>'

Make sure to add the script in your html page, so it ovverides pieChart settings inherited when loading nvd3.js <script src="your/path/to/pieChart.js" type="application/javascript"></script>

UPDATE:

Just so you know, the data you pass into the chart will be rendered as it is, you will have make the percentage calculations and pass it into the chart. The pie chart slices size will be calculated based on the data you send into the chart. Just letting you know, disregard if you already knew it.

UPDATE: 30th July 2013

I just stumbled upon the correct way of editing the tooltip without tinkering with the pieChart.js file.

var chart = nv.models.pieChart().x(function(d) {
    return d.key;
}).y(function(d) {
    return d.daily[0].sales;
}).showLabels(true).values(function(d) {
    return d;
}).color(d3.scale.aColors().range()).donut(true).tooltips(true).tooltip(function(key, x, y, e, graph) {
    return '<h3>' + key + ' Custom Text Here ' + x + '</h3> here' + '<p> or here ,' + y + '</p>'
});

Just wanted you to update the answer. So now you know two ways of doing it.

Hope it helps you.