second x-axis

by kzoon

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 600px; 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: {
              events: {
                load: function () {
                    centerLabels(this.xAxis[1]);
                }, resize: function () {
                    centerLabels(this.xAxis[1]);
                }
            }
        },
        xAxis: [{
            categories: ['A', 'B', 'C', 'D', 'A', 'D', 'B', 'C', 'E'],
            tickmarkPlacement: 'on',
        }, {
            linkedTo: 0,
            categories: ['dummy', 'dummy', 'dummy', 'District I', 'dummy', 'District II', 'dummy', 'dummy', 'District III'],
            tickPositions: [3, 5, 8],
            opposite: true,
            labels: {
                    //y:20,
                style: {
                    fontWeight: 'bold'
                }
             
            },
            alternateGridColor: 'yellow',
          
        }],

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

        }]
    });
});