Show label and percentage in Google pie chart

5
votes

I would like to show label and percentage in Google pie chart. Is there any way to do it? In the docs, I found that it is possible to modify text with pieSliceText option. Possible values are:

label - show name of data (e. g. Apples)

value - show absolute value (e. g. 7)

percentage - show percentage value (e. g. 50%)

value-and-percentage - show both value and percentage (e. g. 7 (50%))

But is there something like label-and-percentage to show something like that Apples (50%)?

2
javascriptchartsgoogle-visualization

2 Answers

4
votes

the only config option that will show both the label & percentage is for the legend... 

legend: {
  position: 'labeled'
},

see following working snippet... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Tasks', 'Completed'],
    ['Morning', 28],
    ['Afternoon', 43],
    ['Evening', 80],
    ['Night', 161]
   ]);

  var options = {
    width: 900,
    height: 400,
    title: 'Tasks Completed',
    pieHole: 0.5,
    colors: ['#008000', '#ffbf00', '#FF0000','#4E6282'],
    pieSliceText: 'value',
    sliceVisibilityThreshold :0,
    fontSize: 17,
    legend: {
      position: 'labeled'
    },
  };

  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
1
votes

You can show either label or percentage on pie charts. Look at the pieSliceText options here.

But if this is your requirement and you HAVE to show label and percentage both on pie chart that you can try this: set, pieSliceText: 'value' in options. And then pass formatted value in data of chart by calculating the percentage of every slice data and passing the label + percentage as formatted value:

data.addRows([
  ['Label', {v:value, f:'formatted value'}],
]);

  • here v: is the value of chart

  • and f: is formatted value of chart which in your case will be label + percentage.

Eg:

[chartlabels, {v: chartvalue, f: chartlabels+" "+((100 * chartvalue) / totalofvalues).toFixed(2)+"%"}]