CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
rob.m
rob.m

Reputation: 10571

Add custom text to value in google pie charts?

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.

Upvotes: 3

Views: 1285

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

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>

Upvotes: 3

Related Questions