How to display% percentage on NVD3 chart?

Question

I tried to display the percentage on the NVD3 chart , but I don’t see how to do it ... I am looking for something like this

First of all, is there a graph option or a way to show something inside each part of the pie chart? If so, is it possible to display the percentage instead of the exact values?

Thanks and enjoy your weekend!

Answer 1

I assume that you were able to get a sample NVD3 Card .

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

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

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

Be sure to add the script to the html page so that it overlayes the pieChart parameters inherited when loading nvd3.js <script src="your/path/to/pieChart.js" type="application/javascript"></script>

UPDATE:

Just so that you know, the data that you transfer to the chart will be displayed as is, you will do percentage calculations and transfer them to the chart. The slice size of the pie chart will be calculated based on the data you send to the chart. Just let it know, neglect it if you already knew it.

UPDATE: July 30, 2013

I just stumbled upon the correct way to edit the tooltip without using 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 to do this.

Hope this helps you.

Answer 2

Starting with version 1.1.10 NVD3, you can configure the type of label

Just call chart.pie.labelType("percent"); to mark each fragment with the corresponding percentage. You can also display the labelType("key") or the labelType("value") for each fragment.

Full 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; });