tickmarkPlacement between

by valk

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; maxWidth: 700px; margin: 0 auto"></div>

JavaScript

$(function () {
    function centerLabels(axis) {
        var tickWidth = axis.width / axis.categories.length,
            lastTick = -1;
        for (var i = 0; i < axis.categories.length; i++) {
            if (axis.ticks[i]) {
                var left = axis.chart.plotLeft + ((lastTick + 1) * tickWidth),
                    label = axis.ticks[i].label,
                    newX = left + (((axis.ticks[i].pos - lastTick) / 2) * tickWidth),
                    x = newX - label.xy.x;

                label.attr({
                    translateX: x,
                    translateY: 0
                });

                lastTick = i;

            }
        }

    };
    $('#container').highcharts({
        chart: {
            backgroundColor: '#FCFFC5',
            spacing: 0,
            events: {
                load: function () {
                    centerLabels(this.xAxis[0]);
                }, resize: function () {
                    centerLabels(this.xAxis[0]);
                }
            }
        },

        xAxis: [{

            categories: ['District AAAAAA I', 'District I', 'District I', 'District I', 'District II', 'District II', 'District III', 'District III', 'District III'],
            tickPositions: [3, 5],
            tickmarkPlacement: 'between'
        }],

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]

        }]
    });
});