Markers to appear between the ticks

Question

I want the markers to appear between the ticks. I have searched but found nothing on google or the highcharts API etc.

My clients want the dots to appear between the numbers - not against them.

Here is the code,

jQuery('.graph').highcharts({
        chart: {
            type: 'line',
            marginRight: 10,
            marginBottom: 20,
            height: 117,
            plotBorderColor: '#E6DB41',
            plotBorderWidth: 2,
            borderColor: '#0793D1',
            borderRadius: 0,
            borderWidth: 2
        },
        credits: {
            enabled: false
        },
        title: {
            text: ''
        },

        legend: {
            enabled: false,

        },
        xAxis: {
            tickLength: 0,
            categories: ['11', '12','13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24'],
            gridLineColor: '#cccccc',
            gridLineWidth: 1,
            tickmarkPlacement: 'on',

            labels: {
                formatter: function () {
                   return '<span style="fill: #0793D1;font-size:7px;">' + this.value + '</span>';
                }
            }

        },
        yAxis: {
            tickInterval: 50,
            max: 200,
            min: -5,
            startOnTick: false,
            title: {
                enabled: false
            },
            gridLineColor: '#cccccc',
            gridLineWidth: 1,
            labels: {
                formatter: function () {
                   return '<span style="fill: #0793D1;font-size:9px;">' + this.value + '</span>';
                }
            },
            offset:-5
        },
        series: [{
            name: 'Reservierunge',
            data: [<?php echo $hourlyData?>]

        }],
        plotOptions: {
            series: {
                marker: {
                    enabled: true
                }
            }
        },
        tooltip: {
            enabled: false
        },

        exporting: {
            enabled: false
        },
        colors: [
                 '#F80001', 
                 '#0d233a', 
                 '#8bbc21', 
                 '#910000', 
                 '#1aadce', 
                 '#492970',
                 '#f28f43', 
                 '#77a1e5', 
                 '#c42525', 
                 '#a6c96a'
              ]

    });

Answer 1

You need to replace tickmarkPlacement: 'on' with tickmarkPlacement: 'between';

http://api.highcharts.com/highcharts#xAxis.tickmarkPlacement

EDIT: Workaround: You can move labels group by translate() funciton or move each element. Simple example: http://jsfiddle.net/Z3Yqx/1