Skip to content Skip to sidebar Skip to footer

How Do I Detect A Zoom Event In Highcharts?

Is it possible to detect a zoom event in Highcharts? My use case is that I have some state external to the chart, and when the user zooms in on part of it I want to detect what the

Solution 1:

Have you tried going through the Highcharts API?

You may want to look @ xAxis.events.setExtremes And/Or chart.events.selection

Solution 2:

You want to look at the redraw event as well. When you zoom, the chart is redrawn to reflect the changes. chart.events.redraw

events: {
    redraw: function(){
        console.log(this.xAxis);
        console.log(this.yAxis);
    }
}

Solution 3:

I found a way using redraw global event:

{
  redraw: function(event) {
    if (
      (event ? .target ? .axes[0] && event ? .target ? .axes[0].max !== event ? .target ? .axes[0].oldMax) || 
      (event ? .target ? .axes[1] && event ? .target ? .axes[1].max !== event ? .target ? .axes[1].oldMax)) {
        // Here you can be sure the this is closer to a zoom event... almost, because it also detect drag on the map :(
      }
  }
}

I just want to leave this here because I decide to use something else but my future self might need it :D

Post a Comment for "How Do I Detect A Zoom Event In Highcharts?"