I am using Highcharts drilldown feature and change visualization type in each level of drilldown. I have an issue when I drillup from pie chart to columns type, the xAxis labels disapear (replaced by number values).

You can see an example in the following jsfiddle : /

When you click on "Safari" then drillup to "Browser", the xAxis values are correct but when you click on "Chrome" and drillup to "Browser", the xAxis values are replaced by numbers.

I tried to use the

chart:{ 
 event:{
  drillup: function(e) {
   var chart = this;
   chart.axes[0].update({type: "category"});
  }
 }
}

but it seems the "names" values are not correctly set in the xAxis.

Is there a way to fix that please ? Thanks

I am using Highcharts drilldown feature and change visualization type in each level of drilldown. I have an issue when I drillup from pie chart to columns type, the xAxis labels disapear (replaced by number values).

You can see an example in the following jsfiddle : https://jsfiddle/vegaelce/21ogcap9/

When you click on "Safari" then drillup to "Browser", the xAxis values are correct but when you click on "Chrome" and drillup to "Browser", the xAxis values are replaced by numbers.

I tried to use the

chart:{ 
 event:{
  drillup: function(e) {
   var chart = this;
   chart.axes[0].update({type: "category"});
  }
 }
}

but it seems the "names" values are not correctly set in the xAxis.

Is there a way to fix that please ? Thanks

• highcharts
• drilldown
• x-axis

1 Answer 1

Inside of the drillup event, you can update the x-axis type to category and set correct categories by extracting names from the data points.

 events: {
    drillup: function(e) {
        const categories = e.seriesOptions.data.map(data => data.name);
        
        e.target.xAxis[0].update({
            type: 'category',
            categories
        });
    }
}

Demo: https://jsfiddle/BlackLabel/vufgc0x2/

You can also set the categories array explicitly on the x-axis, so that it will work correctly on the drillup regardless of the displayed chart type.

xAxis: {
  type: "category",
  categories: ['Chrome', 'Safari', 'Other']
}

Demo: https://jsfiddle/BlackLabel/mdw7tpxb/