Prakash Krishnakumar
Prakash Krishnakumar

Reputation: 73

I want google pie chart to show pieSliceText to be rounded whole number

I am using Google Pie Chart, I want to display round percentage value but it is not showing like that. Anyone, suggest me an idea to show rounded percentage value. My code looks like

 google.setOnLoadCallback(drawChart);
                    function drawChart() {
 var data = google.visualization.arrayToDataTable([
                            ['Members', 'Total Members'],
                            ['Members', 23],
                            ['Total Members', 41 - 23]
                        ]);
                    var options = {
                            width: 150,
                            height: 150,
                            chartArea: {
                                width: 150,
                                height: 150,
                                left: 10},
                            legend: {position: 'none'},
                            tooltip: {trigger: 'none'},
                            colors: ['#FEC240', '#FFFFFF'],
                            pieSliceText: 'percentage',
                            pieSliceTextStyle: {
                                bold: true,
                                fontSize: 16,
                                color: 'black'
                            },
                            enableInteractivity: false,
                            pieSliceBorderColor: "#DFE0E1"

                        };
var chart = new 
google.visualization.PieChart(document.getElementById('checkpie'));
chart.draw(data, options);

<div id="checkpie" ></div>

Upvotes: 3

Views: 3080

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

there isn't a standard option for setting the format of the percentage shown on the slices

as such, need to calculate the percentage manually,
use option --> pieSliceText: 'value' -- to show formatted value on slices

see following working snippet...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Members', 'Total Members'],
    ['Members', 23],
    ['Total Members', 41 - 23]
  ]);

  // find total to calc % manually
  var totalData = google.visualization.data.group(
    data,
    [{column: 0, modifier: function () {return 'total'}, type:'string'}],
    [{column: 1, aggregation: google.visualization.data.sum, type: 'number'}]
  );

  // number formatter
  var formatPercent = new google.visualization.NumberFormat({
    pattern: '0%'
  });

  // set formatted value for each row
  for (var i = 0; i < data.getNumberOfRows(); i++) {
    var calcPercent = data.getValue(i, 1) / totalData.getValue(0, 1);
    data.setFormattedValue(i, 1, formatPercent.formatValue(calcPercent));
  }
  
  var options = {
    width: 150,
    height: 150,
    chartArea: {
      width: 150,
      height: 150,
      left: 10
    },
    legend: {position: 'none'},
    tooltip: {trigger: 'none'},
    colors: ['#FEC240', '#FFFFFF'],
    pieSliceText: 'value',  // <-- show formatted value on slices
    pieSliceTextStyle: {
      bold: true,
      fontSize: 16,
      color: 'black'
    },
    enableInteractivity: false,
    pieSliceBorderColor: "#DFE0E1"
  };
  var chart = new google.visualization.PieChart(document.getElementById('checkpie'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="checkpie"></div>

Upvotes: 2

Related Questions