Mark Salamon February 2016

Percentages on Slices of ZingChart Pie Chart

(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">&nbsp;</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.

Answers


mike-schultz February 2016

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>

Post Status

Asked in February 2016
Viewed 3,729 times
Voted 12
Answered 1 times

Search




Leave an answer