Highcharts - Bubble chart - Moving gridlines

Question

I have created a highcharts bubble chart as follows:

jsFiddle

If possible I'd like the a-axis gridlines to be in the middle of the bubbles.

Is there a way of achieving this ?

Here's the code:

$(function () {

    var data = [{ x: 0, y: 1, z: 1, dataSeries: 'data #1', dataPerc: '1.2' },
                { x: 1, y: 2, z: 2, dataSeries: 'data #2', dataPerc: '2.2' },
                { x: 2, y: 0, z: 0, dataSeries: 'data #3', dataPerc: '19.2' },
                { x: 3, y: 7, z: 7, dataSeries: 'data #4', dataPerc: '12.0' },
                { x: 4, y: 5, z: 5, dataSeries: 'data #5', dataPerc: '24' },
                { x: 5, y: 4, z: 4, dataSeries: 'data #6', dataPerc: '12' },
                { x: 6, y: 3, z: 3, dataSeries: 'data #7', dataPerc: '15.3' },
                { x: 7, y: 3, z: 3, dataSeries: 'data #8', dataPerc: '1.2' }];         

    $('#container').highcharts({

        chart: {
            type: 'bubble',
            plotBorderWidth: 1,
            zoomType: 'xy'
        },
            credits: false,

        legend: {
            enabled: false
        },

        title: {
            text: ''
        },

        xAxis: {
            gridLineWidth: 1,
            title: {
                text: ''
            },
           categories: ['data #1', 'data #2', 'data #3', 'data #4', 'data #5', 'data #6', 'data#7', 'data #8']
        },

        yAxis: {
            startOnTick: true,
            min: 0,
            max: 7,
            title: {
                text: 'Score'
            },
            labels: {
                format: '{value}'
            },
            maxPadding: 0.2
        },

        tooltip: {
            useHTML: true,
            headerFormat: '<table>',
            pointFormat: '<tr><th colspan="2"><h3>{point.dataSeries}</h3></th></tr>' +
                '<tr><th>Score:</th><td>{point.y}</td></tr>' +
                '<tr><th>Percentage:</th><td>{point.dataPerc}%</td></tr>',
            footerFormat: '</table>',
            followPointer: true
        },

        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    format: '{point.name}'
                }
            }
        },
        series: [{ data: data }]
    });
});

Answer 1

You can use the tickmarkPlacement option:

xAxis: {
    tickmarkPlacement: 'on'
}

For categorized axes only. If on the tick mark is placed in the center of the category, if between the tick mark is placed between categories. The default is between if the tickInterval is 1, else on. Defaults to null.

See this updates JSFiddle for an example.