I have integrated Nvd3 into my Angular project to create various types of charts. Utilizing the angular directive from Krispo's website, I am currently working on a pie chart that displays values in percentages. However, the displayed values are rounded and shown without decimal points.
An example of this issue can be seen in the plunker link provided below: http://plnkr.co/edit/jSf1TAkj5rO1S7p5PuJK?p=preview
In the mentioned example, the percentages should appear as 21.9% and 78%, but they are displayed differently.
The challenge lies in modifying the format of slice values while keeping the labels, which represent percentages, unchanged.
This becomes particularly problematic when dealing with slices close to 100%, as it should ideally display something like 99.99% instead of rounding up to 100%, potentially misleading users into thinking there is only one slice present.
Below is the current configuration of the chart:
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);
}
}