Add custom text to value in google pie charts?

Question

The following works and displays the pie charts with the value in it:

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Language', 'Speakers (in millions)'],
      ['Internal studio',  3.5],
      ['External studio',  2.1],
    ]);

    var options = {
      legend: 'none',
      fontSize: '16',
      pieSliceText: 'value',
      pieSliceBorderColor:"transparent",
      backgroundColor: {
        fill:'#090e1a', 
        strokeSize: 1
      }
    };

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

I would like to add M next to the value eg. 3.5M

I tried:

      ['Internal studio',  3.5+"M"],
      ['External studio',  2.1+"M"]

But its' wrong.

Answer 1

in your data, you can provide both the value ( v: ) and the formatted value ( f: ),
by using object notation.

var data = google.visualization.arrayToDataTable([
  ['Language', 'Speakers (in millions)'],
  ['Internal studio',  {v: 3.5, f: '3.5M'}],
  ['External studio',  {v: 2.1, f: '2.1M'}],
]);

see following working snippet...

 google.charts.load('current', { packages: ['corechart'] }).then(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Language', 'Speakers (in millions)'], ['Internal studio', {v: 3.5, f: '3.5M'}], ['External studio', {v: 2.1, f: '2.1M'}], ]); var options = { legend: 'none', fontSize: '16', pieSliceText: 'value', pieSliceBorderColor:"transparent", backgroundColor: { fill:'#090e1a', strokeSize: 1 } }; var chart = new google.visualization.PieChart(document.getElementById('donut_single')); chart.draw(data, options); } 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="donut_single"></div> 

---

another option, google has a number formatter you can use,
with a format option --> 'short'

this would allow you to provide the actual value,
but display the value 3,500,000 as 3.5M

and it will automatically use K for thousand, etc...

var data = google.visualization.arrayToDataTable([
  ['Language', 'Speakers (in millions)'],
  ['Internal studio',  3500000],
  ['External studio',  2100000],
]);

var formatShort = new google.visualization.NumberFormat({
  pattern: 'short'
});
formatShort.format(data, 1);

see following working snippet...

 google.charts.load('current', { packages: ['corechart'] }).then(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Language', 'Speakers (in millions)'], ['Internal studio', 3500000], ['External studio', 2100000], ]); var formatShort = new google.visualization.NumberFormat({ pattern: 'short' }); formatShort.format(data, 1); var options = { legend: 'none', fontSize: '16', pieSliceText: 'value', pieSliceBorderColor:"transparent", backgroundColor: { fill:'#090e1a', strokeSize: 1 } }; var chart = new google.visualization.PieChart(document.getElementById('donut_single')); chart.draw(data, options); } 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="donut_single"></div>