highchartsaxesdrilldown

Hide axes when drilling from column chart to pie chart in Highcharts


I'm using some different charts renderer in Highcharts drilldown. In some cases, my first level is a column chart and the second (or third...) level is a pie. Everything is working well except some specified settings for the axes (title, color/width) that appear in the pie chart. The expected behavior is entire axis are hidden in case of pie chart. As example, in the following : https://jsfiddle.net/vegaelce/w3crqofu/ I would like the axis lines and titles to be hidden in the pie drilled charts.

When using a pie in the first level by setting the type as for the second level :

type: 'pie',

the axes are correctly hidden.


Solution

  • You can use the drilldown and drillup callbacks to customize your chart options, like:

    events: {
      drilldown() {
        const chart = this;
    
        chart.title.hide()
                
                chart.axes.forEach(axis => axis.update({visible: false}, false, false))
                chart.reflow()
      },
      drillup() {
        const chart = this;
    
        chart.title.show()
                chart.axes.forEach(axis => axis.update({visible: true}, false, false))
                chart.reflow()
      }
    }
    

    Demo: https://jsfiddle.net/BlackLabel/3ac9hrfj/

    API: https://api.highcharts.com/highcharts/yAxis.visible