Highcharts drilldown column to pie, axis label issue

Question

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.net/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

jedrzejruta · Accepted Answer · 2024-11-19 11:56:44Z

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.net/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.net/BlackLabel/mdw7tpxb/

edited Nov 19, 2024 at 11:56

answered Nov 19, 2024 at 11:38

jedrzejruta

6311 gold badge2 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Highcharts drilldown column to pie, axis label issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related