Percentages on Slices of ZingChart Pie Chart - zingchart

Question

(I asked a similar question once before, but the issue has cropped up again.)
I have a very simple pie chart using ZingCharts, but even though all of the examples on the ZingCharts site show percentages on each slice, I can't get the percentages to show. Note that I am using value boxes. I am using the most recent version of ZingCharts from the CDN: https://cdn.zingchart.com/zingchart.min.js
Note that I am looking for the percentage to appear ON the slice, not in the value box which is text attached to each slice by a line.
Here is my code:
<div id="pie-chart"> </div>
<script>
var slices = var slices = slices = [
{"values":[59],"text":"USA"},
{"values":[55],"text":"UK"}
];
var chartData = {
"type":"pie",
"plot":{
"value-box":{
"visible":true,
"placement":"out",
"text":"%t (%v)"
}
},
"series": slices
};
zingchart.render({
id:"pie-chart",
data: chartData,
height:400,
width:"100%"
});
</script>
I want to use a standard pie chart, not a pie chart with more effects.

Answer 1

To show the percentage value on charts, you would need to use the %npv (node-percent-value) token instead of %v which displays the raw value. More information in the pie chart types page : http://www.zingchart.com/docs/chart-types/pie/
Note that the default functionality for a value box is
"value-box" : {
"placement" : "in",
"text" : "%npv%"
}
Therefore, you can choose to omit that from your JSON. In the example below, I have shown the JSON with the options explicitly.
var slices = [
{"values":[59],"text":"USA"},
{"values":[55],"text":"UK"}
];
var chartData = {
"type":"pie",
"series": slices,
"plot" : {
"value-box" : {
"placement" : "in",
"text" : "%npv%"
}
}
};
zingchart.render({
id:"pie-chart",
data: chartData,
height:400,
width:"100%"
});
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<div id="pie-chart"></div>