second x-axis

by kzoon

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="Height: 450px"></div>

JavaScript

(function (H) {
    H.wrap(H.Axis.prototype, 'render', function (proceed) {
        proceed.call(this);
        if (this.options.isGroupAxis) {
            var axis = this,
                horiz = axis.horiz,
                lastTick = -1;
            if (horiz) {
                var tickWidth = axis.width / axis.categories.length;
                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.translate(x, 0);

                        lastTick = i;
                    }
                }
            } else {
                var tickHeight = axis.height / axis.categories.length;
                for (var i = 0; i < axis.categories.length; i++) {
                    if (axis.ticks[i]) {
                        var top = axis.chart.plotTop + ((lastTick + 1) * tickHeight),
                            label = axis.ticks[i].label,
                            newY = top + (((axis.ticks[i].pos - lastTick) / 2) * tickHeight) + 3, //TODO: base Line calculation (3)
                            y = newY - label.xy.y;
                        label.translate(0, y);

                        lastTick = i;
                    }

                }

            }
        }

    });
}(Highcharts));

var chart = new Highcharts.Chart({

    chart: {
        //inverted: true,
        renderTo: 'container'
    },

    xAxis: [{
        categories: ['A', 'B', 'C', 'D', 'A', 'D', 'B', 'C', 'E'],
        tickmarkPlacement: 'on',
    }, {
        isGroupAxis: true,
        linkedTo: 0,
        categories: ['dummy', 'dummy', 'dummy', 'District I', 'dummy', 'District II', 'dummy', 'dummy', 'District III'],
        tickPositions: [3, 5,...