second x-axis
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'],
//tickWidth: 0,
tickPositions: [],
lineColor:'#ffffff'
//opposite: true,
//labels: {
//y:20,
// style: {
// fontWeight: 'bold'
// }
// },
//alternateGridColor: 'yellow',
}],
tooltip: {
shared: true,
//useHTML: true,
headerFormat: '{point.key}{point.name}'
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]
}]
});
var chart_t = $('#container').highcharts();
chart_t.xAxis[1].update({ tickPositions:[3, 5, 8]...