Google Charts, Setting gridlines count of barchart

Question

Currently I am working with the Google Charts API to generate some charts. To display the correct image I should change the gridline steps of the X-axis (values) marked with the green gridlines.

Current graph

_{(source: jordysipkema.nl)}

Expected graph

_{(source: jordysipkema.nl)}

(Expected graph made by resizing the browser)

Setting the data

var data = new google.visualization.DataTable();
data.addColumn('string', 'Labels');
data.addColumn('number', 'Result value');
data.addRows([
    ["Label 1", 8.098205131],
    ["Label 2", 10.08567831],
    ["Label 3", 10.790166352],
    ["Label 4", 9.148802676],
    ["Label 5", 8.571340962]
]);

Define graph options

var options = {        
    title: 'Title - Value Bar Chart',
    subtitle: 'Uses: label and a value',
    legend: {
        position: 'none'
    },
    height: chartHeight,
    bars: 'horizontal', // Required for Material Bar Charts.
    hAxis: {
        format: '#.###',
        gridlines: {
            color: '#00ff00' //Green lines for debugging purposes 
            // count: 4
        },
        ticks: [8, 9, 10, 11],
        viewWindow: {
            min: Math.floor(columnRange.min),
            max: Math.ceil(columnRange.max)
        }
    },
    vAxis: {
        gridlines: {
        color: '#ff0000', //Red lines
            count: 1
        }
    }
};

I've read about the hAxis.gridlines.count parameter in the options array. Unfortunately this doesn't change anything to the chart. In this given case, where the values range from 8 to 11, I would like to have 4 gridlines (set at 8, 9, 10 and 11).

The other approach I've tried is setting the hAxis.ticks parameter to [8, 9, 10, 11]. This didn't affect the graph either.

A working JSFiddle example to demonstrate what is going on: JSFiddle of the code

Any help would be greatly appreciated

thibpat thibpat · Accepted Answer · 2015-10-15T09:29:28

The only way I managed to get the expected result is by constraining the width to 600px:

var options = {
    title: 'Title - Value Bar Chart',
    subtitle: 'Uses: label and a value',
    legend: {
        position: 'none'
    },
    width: 600,
    height: chartHeight,
    bars: 'horizontal', // Required for Material Bar Charts.
    hAxis: {
        format: '#.###',
        gridlines: {
            color: '#00ff00' //Green lines for debugging purposes
        },
        viewWindow: {
            min: Math.floor(columnRange.min),
            max: Math.ceil(columnRange.max)
        }
    },
    vAxis: {
        gridlines: {
            color: '#ff0000', //Red lines
            count: 1
        }
    }
};

https://jsfiddle.net/qLpwrtmw/