Search code examples
chartsgoogle-visualization

How to format google pie chart to 2 decimal place percentage?

Original Fund = 20000

profit = 10% (2000)

New Fund = 22000

New fund 22000 is 90.91% of New Fund 22000, but google pie chart show it is 90.9% only, how to make it show 2 decimal place 90.91%?

enter image description here

google.charts.load("current", {packages:["corechart"]});
                                google.charts.setOnLoadCallback(drawChart2);
                                function drawChart2() {
                                    var data = google.visualization.arrayToDataTable([
                                          ['Label', 'Value'],
                                          ['Credit Fund', 20000],
                                          ['Gain', 2000],
                                          ['Drawndown', 0],
                                    ]);
            
                                    var options = {
                                    title: 'abcdfe',
                                    titlePosition: 'none',
                                    legend: { position: 'top', maxLines: 2  },    
                                    pieHole: 0.4,
                                    };

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

I have tried :

var formatter = new google.visualization.NumberFormat({fractionDigits:2});
formatter.format(data, 1);

But it is not working.

Solution

  • it's not possible to format the percentage displayed by the chart.

    but you could use option pieSliceText: 'value' to display the value instead.
    then manually calculate the percentages and use those to draw the chart.
    and we can use a custom tooltip to display the real value.

    see following working snippet...

    google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  // real data
  var dataReal = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Credit Fund', 20000],
    ['Gain', 2000],
    ['Drawndown', 0],
  ]);

  // aggregate real data to get total
  var dataAgg = google.visualization.data.group(
    dataReal,
    [{column: 0, type: 'string', modifier: function () {return 'Total'}}],
    [{aggregation: google.visualization.data.sum, column: 1, type: 'number'}]
  );

  // build chart data based on %
  var dataChart = new google.visualization.DataTable();
  for (var i = 0; i < dataReal.getNumberOfColumns(); i++) {
    dataChart.addColumn(dataReal.getColumnType(i), dataReal.getColumnLabel(i));
  }

  // display real value in tooltip
  dataChart.addColumn({type: 'string', role: 'tooltip'});
  for (var i = 0; i < dataReal.getNumberOfRows(); i++) {
    dataChart.addRow([dataReal.getValue(i, 0), (dataReal.getValue(i, 1) / dataAgg.getValue(0, 1)), dataReal.getValue(i, 0) + '\n' + dataReal.getFormattedValue(i, 1)]);
  }

  // format decimals
  var formatNumber = new google.visualization.NumberFormat({
    pattern: '#,##0.00 %'
  });
  formatNumber.format(dataChart, 1);

  var options = {
    pieSliceText: 'value',
    title: 'abcdfe',
    titlePosition: 'none',
    legend: {
      position: 'top',
      maxLines: 2
    },
    pieHole: 0.4,
  };

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