How to show only integers (no decimals) in chart API x/y-axis labels

Question

I\'m using a column chart with the Google Chart JS Api. I\'m displaying some values (total orders by day) that can only be represented as integers.

Everything is work

Answer 1

I'm using the following code:

google.charts.setOnLoadCallback(function(){
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Y');
    data.addColumn('number', 'X');

    var max = 0; //Or something like Int.MinValue
    for (var i = 0;i< arr.length;i++) {
      max = (arr[i]>max)? arr[i]:max; //calculate max value
      data.addRow("<<some calculation>>");
    }

    var options = {
      height: 300,
      vAxis: {
        gridlines: { count: max+1}, //+1 is importent for the origingridline
        viewWindow:{
          min: 0,
          max: max
        },
      }
    };

    var chart = new google.visualization.ColumnChart(document.getElementById("<< div_id >>"));

    chart.draw(data, options);
  }

Just calculate your maximum value and then set gridlines.count to this value

Answer 2

The easiest way is to edit the left vertical axis, with Min as 0, and Max as a multiple of 5 (5, 10, 15 etc) as appropriate to your expected maximum.

Answer 3

use the option

vAxis: {format: '0'}

as in

chart.draw(data, {
                   width: 800,
                   height: 480,
                   orientation: 'horizontal',
                   vAxis: {format: '0'}
                  }
           );

Answer 4

I prefer the gridlines: { count: -1 } option, but you can always explicitly specify the values you want with ticks. Cool thing about this is they don't even have to be evenly spaced - you could do [1, 10, 100, 200, 500, 1000] if you wanted:

options: { vAxis: { ticks: [1,2,3,4,5,6,7,8,9,10] } }

Depending upon your data you may want to hardcode this or use thresholds.

Answer 5

Adding {format : 0} converts the float ticks to integers but the actual values on the bars appear incorrectly.

The main issue is Google Charts API assumes you want 5 gridlines mostly which may not work out to give you integer tick values.

Adding this gave me nice round tick values -

  gridlines: { count: -1}

source - https://groups.google.com/forum/#!topic/google-visualization-api/4qCeUgE-OmU

Answer 6

if you want only the integer values to be shown, you should take to account that google charts wants to show you at least 5 gridlines. Presuming all of them should be integer give the graph following:

vAxis: {  title: 'Orders Count',

                minValue: 4,                    
                viewWindow:{min:0}, /*this also makes 0 = min value*/         
                format: '0',                     
            },