Question

I want to drill down through column chart in highcharts. I have a 3 level drill down with each having at least 20 x-axis labels.Right now drill down is working for column click. I want to do the same thing on x axis click.

Based on my research i found this probable solution. What I want to achieve can be seen here on clicking x-axis labels.

The function i used to achieve this functionality

function(chart) {

   //console.log(chart.xAxis[0].ticks[0]);
   $.each(chart.xAxis[0].ticks, function(i, tick) {
       tick.label.on('click', function() {
           var drilldown = chart.series[0].data[i].drilldown;
           if (drilldown) { // drill down
               chart.setTitle({
                   text: drilldown.name
               });
               setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color, drilldown.level , drilldown.ytitle);

           } else { // restore
               setChart(name, categories, data, null, level , 'Total Agent score');
               chart.setTitle({text: "Agent Performance Drill Down Report"});

               chart.setTitle(undefined, { text: 'Click the Columns to view Drill Down Reports.' });
           }
       });
   });

}

The problem: It works with most of the x-labels but not all. This can be seen @ this fiddle the label drill down does not work at all 3 levels on all labels.

Also, here is the post I made on highchart forum for reference

Answer 1

You are adding the handlers at chart load, some of the axis labels won’t be present at that time, hence those labels won’t respond to the click event

As a quick (read dirty) fix you can add the same handler that you have for the load to the redraw, so the new labels that are created will bind to it.

You can bind the same function to the redraw (this happens when the x-axis labels are changed too, you can replace with a less frequent event that suits the need too) event, so every time the chart is redrawn you unbind (since I am unsure of the lifetime of the labels in highchart, if an exisiting label is reused for the new drilled down chart, it would be safer to remove) any existing click handler as follows for each tick

 $(tick.label.element).unbind('click');

and then add the click handler

var bindAxisClick = function() {
    $.each(this.xAxis[0].ticks, function(i, tick) {
        $(tick.label.element).unbind('click');
        $(tick.label.element).click(function() {
            var drilldown = chart.series[0].data[i].drilldown;
            if (drilldown) { // drill down
                chart.setTitle({
                    text: drilldown.name
                });
                setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color, drilldown.level, drilldown.ytitle);

            } else { // restore
                setChart(name, categories, data, null, level, 'Total score');
                chart.setTitle({
                    text: "Drill Down Report"
                });

                chart.setTitle(undefined, {
                    text: 'Click the Columns to view Drill Down Reports.'
                });
            }
        });
    });
};

Modify the chart options to add the redraw and load handlers

chart :{
    ...
    events: {
            redraw: bindAxisClick ,
            load:bindAxisClick 
    },
    ...
 }

Dril down from x-axis labels @ jsFiddle