Google charts setting grid value in barchart line

Question

I am currently working with the Google Charts API to create some charts. In order to display the correct image, I have to change the X-axis grid line steps (values) marked with green grid lines.

Current schedule

_{(source: jordysipkema.nl )}

Expected Schedule

_{(source: jordysipkema.nl )}

(The expected schedule is made by resizing the browser)

Data setting

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 chart parameters

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 read about a parameter hAxis.gridlines.countin an array of parameters. Unfortunately, this does not change anything on the chart. In this particular case, when the values ​​range from 8 to 11, I would like to have 4 grid lines (set to 8, 9, 10 and 11).

, , - hAxis.ticks [8, 9, 10, 11]. .

JSFiddle, , : JSFiddle

Answer 1

, , - 600 :

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/