Google Chart hAxis.gridlines.count does not work as expected

Question

I have a google Chart with percentage values from 0 to 100% (i.e. 0 to 1) When I set hAxis.gridlines.count to 10 expecting to get gridlines at 0, 10, 20, ... 90, 100 I get gridlines at 0, 12, 24, 36, ..., 96, 108

I could not find any solution by now.

Here is my Code:

function getData() {

    // Create the data table.
    var data = new google.visualization.arrayToDataTable([
      ['Category', 'Fulfillment (%)'],
      ['A', .75],
      ['B', .50],
      ['C', .50],
      ['D', .30],
      ['E', 0]
    ]);

    // Set chart options
    var options = {
        'title': 'My Title',
        'height': 300,
        'backgroundColor': 'none',
        'hAxis': {
            'maxValue': 1,
            format: '#%',
            gridlines: {
                count: 10
            }
        },
        'colors': ['#F5821E'],
        legend: { position: "none" }
    };

    var formatter = new google.visualization.NumberFormat({ pattern: '#%' });
    formatter.format(data, 1);

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

Scarce

Answer 1

Reading the documentation, you can see that hAxis.gridlines.count specifies how many lines to draw, not where to draw them. What you're looking for is probably hAxis.ticks instead.

Unmeet

almost :) it's hAxis.ticks not gridlines.ticks – Scarce

Answer 2

Use count: 11 and not 10. This will change the labels of the grid lines.

Needleful

Answer 3

I had the same problem (bug) and I realized that if you set a height for a chart (column chart) then number of horizontal grid will be 2. I you want to use propriety hAxis.gridlines.count than you should to remove height propriety.

Grath