How to enable click on a label on the xAxis in Charts


Recently I was asked if it was possible to be able to click on the labels of the x-Axis of a column-chart. This is especially handy when the charts is not evenly distributed and you have columns which are barely 1 pixel high.

There is some minor customization needed in order to achieve this.

It simply triggers the click-event of the column.

Simply use the AdvancedFormat_Init action and add this to the input-parameters


"labels: { style : { cursor: 'pointer'} }"


"chart: { 
    events: {
        load: function(event) {
            var axis = this.xAxis[0];
            var ticks = axis.ticks;
            var points = this.series[0].points;
            points.forEach(function(point, i) {
                if (ticks[i]) {
                    var label = ticks[i].label.element;
                    label.onclick = function() {point.firePointEvent('click');}

That's it.