Search code examples
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