CODEWITHSUNDEEP
chartsgoogle-visualization
user1888955
user1888955

Reputation: 626

Add units in column chart by Google Charts?

I would like to add units (ms) after "141" in the screenshot. I've tried hAxis.format and vAxis.format, but neither of them worked...

enter image description here

Upvotes: 2

Views: 1454

Answers (1)

WhiteHat
WhiteHat

Reputation: 61230

{hAxis,vAxis,hAxes.*,vAxes.*}.format is for the axis labels...

the tooltip works off the data

format the data using a formatter, such as NumberFormat

NumberFormat - Describes how numeric columns should be formatted. Formatting options include specifying a prefix symbol (such as a dollar sign) or the punctuation to use as a thousands marker.

NumberFormat.format(dataTable, columnIndex)

var formatMS = new google.visualization.NumberFormat({
  pattern: '# (ms)'
});
formatMS.format(data, colIndex);

see following working snippet... 

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0', 'y1'],
    ['row 0', 10, 30],
    ['row 1', 20, 40],
    ['row 2', 30, 60],
    ['row 3', 40, 80]
  ]);

  var formatMS = new google.visualization.NumberFormat({
    pattern: '# (ms)'
  });

  // format y
  for (var colIndex = 1; colIndex < data.getNumberOfColumns(); colIndex++) {
    formatMS.format(data, colIndex);
  }

  var chart = new google.charts.Bar(document.getElementById('chart_div'));
  chart.draw(data);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 2

Related Questions