28

The following example is from Google to create a ColumnChart using Google Charts

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Austria', 'Belgium', 'Czech Republic', 'Finland', 'France', 'Germany'],
    ['2003', 1336060, 3817614, 974066, 1104797, 6651824, 15727003],
    ['2004', 1538156, 3968305, 928875, 1151983, 5940129, 17356071],
    ['2005', 1576579, 4063225, 1063414, 1156441, 5714009, 16716049],
    ['2006', 1600652, 4604684, 940478, 1167979, 6190532, 18542843],
    ['2007', 1968113, 4013653, 1037079, 1207029, 6420270, 19564053],
    ['2008', 1901067, 6792087, 1037327, 1284795, 6240921, 19830493]
  ]);

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('visualization')).
  draw(data, {
    title: "Yearly Coffee Consumption by Country",
    width: 600,
    height: 400,
    hAxis: {
      title: "Year"
    }
  });
}

Which works perfectly, however, I only want one value per column so I change it to:

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Month', 'How many'],
    ['07', 193],
    ['08', 114],
    ['09', 158]
  ]);

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('visualization')).
  draw(data, {
    title: "Yearly Coffee Consumption by Country",
    width: 600,
    height: 400,
    hAxis: {
      title: "Year"
    }
  });
}

And now the vertical axis doesn't start at 0 but close to the lowest value, in this case 114 - is this a bug? I still want it to show from 0 as it's very confusing at a quick glance like this

Any ideas?

1
  • I have only noticed this behaviour on the combo column charts (Feb '16) Feb 10, 2016 at 14:39

3 Answers 3

64

You need to pass another parameter as part of the options when drawing the chart.

vAxis: {minValue: 0}

That will force the vertical axis to start from 0, you can see other possible options here: https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart#Configuration_Options

1
  • Thank you for this, I've always added a row with 0 :) Apr 3, 2018 at 6:43
32

If you haven't data at the graph vAxis: {minValue: 0} will not help. So you can use configuration option viewWindow:

var options = { 
    vAxis: { 
        viewWindow: {
            min:0
        }
    }
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(dataTable, options);
0
2

To anyone who still searching the way to make the axes start 0, you can try this options.

vAxes: {
  0: {baseline: 0},
},

Note that I used vAxes instead of vAxis. I'm not sure why, but that did the trick.

I get the answer here : https://groups.google.com/forum/#!topic/google-visualization-api/vRNJUk9aZUI

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.