Google Charts column chart how to change vertical axis scale?

user_15504508 0
Viewed 36

I have a column chart which I am trying to set the vertical axis scale to whole numbers i.e. 0, 1, 2... instead of 0, 0.5, 1...

Using vAxis : {format : '#'} merely rounds up the decimals, leaving duplicates i.e. 0, 1, 1, 2, 2...

Using vAxis : { gridlines : { count : 5 // for example } } does not seem to have an effect.

Ticks look like a solution but my question is what if my chart is to be dynamic? If I don't know what the max number of jobs would be, so as to set the ticks?

The last resort seems to be putting a height constraint on the chart, forcing the v-axis unit to be larger.

Thank you in advance!

google-apps-script google-visualization charts
1 Answers

to use ticks and still be dynamic,
you can use data table method getComumnRange(columnIndex)
to determine the min and max values of the y-axis values

then use those values to build the ticks array,
see following working snippet...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['category', 'value'],
    ['a', 1],
    ['b', 10],
    ['c', 4],
    ['d', 3],
    ['e', 7]
  ]);

  var yAxisRange = data.getColumnRange(1);
  var ticks = [];
  for (var i = 0; i <= yAxisRange.max; i++) {
    ticks.push(i);
  }

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, {
    vAxis: {
      format: '0',
      ticks: ticks
    }
  });
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

user_50907710
Related