CODEWITHSUNDEEP
highchartsaxis-labelsdrilldown
Modi T
Modi T

Reputation: 1

How can we remove x axis labels post drilldown in highcharts?

I want to have x axis labelled before drilling down but as soon as a user drills down the x axis labels should not be visible anymore. How can I implement?

Upvotes: 0

Views: 313

Answers (2)

ppotaczek
ppotaczek

Reputation: 39139

Use drilldown and drillup events:

const setLabelsVisibility = (chart, isVisible) => {
  chart.xAxis[0].update({
    labels: {
      enabled: isVisible
    }
  }, false);
};

// Create the chart
Highcharts.chart('container', {
  chart: {
    type: 'column',
    events: {
      drilldown: function() {
        setLabelsVisibility(this, false)
      },
      drillup: function() {
        setLabelsVisibility(this, true)
      }
    }
  },
  ...
});

Live demo: https://jsfiddle.net/BlackLabel/vpxhum80/

API Reference: https://api.highcharts.com/highcharts/chart.events

Upvotes: 0

Kolonel_Panic
Kolonel_Panic

Reputation: 61

Is it safe to assume that you have an afterSetExtremes event, like so?

xAxis:{
     labels: {
        enabled: true
     },
     events:{
          afterSetExtremes:afterSetExtremes
     },
     .....

If so, inside of that function you could do the following:

function afterSetExtremes(){
     $('#container').highcharts().xAxis[0].update({
          labels:{
              enabled: false
          }
     });
}

Here you can run my example. Hope it helps!

Highcharts.chart('container', {
    chart:{
        zoomType: 'x'
    },
    title: {
        text: 'Zoom in on chart to hide xAxis labels'
    },
    xAxis: {
        labels: {
            enabled: true
        },
        events:{
          afterSetExtremes:afterSetExtremes
        }
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

function afterSetExtremes(){
     $('#container').highcharts().xAxis[0].update({
         labels:{
              enabled: false
         }
     });
}
#container {
    height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

Upvotes: 0

Related Questions