Rectangle 27 0

Percentages on Slices of ZingChart Pie Chart?


"value-box" : {
          "placement" : "in",
          "text" : "%npv%"
       }
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<div id="pie-chart"></div>
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%"
    });

I wasn't asking about the percentage appearing in the value box (the text separated from each slice by a line), but having the percentage appear ON the slice. Just using %npv will only change the value box.

Mike. Thanks. Is there any way to have both in and out, so the percentage is shown inside and the text/values are shown outside with the line?

Note that the default functionality for a value box is

See updated post for a snippet.

Thanks. I wasn't aware of the "in" vs the "out" placement. I am using I assume the most recent version, as I am accessing the CDN hosted script. Just checked: 2.2.2. That's what's weird. Every example on the ZingChart site shows the percentage appearing on the slice and in the JS that they show, there is no configuration setting for that, but I cannot recreate it.

The value-box in your json has the placement set to "out". Change it to "in", and the value box should appear on the slice. What version of ZingChart are you using? The percentages appear on each pie slice by default in v2.2.0+ .

Therefore, you can choose to omit that from your JSON. In the example below, I have shown the JSON with the options explicitly.

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