Search code examples
chartsgoogle-visualizationpie-chart

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>

Solution

  • 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>