CODEWITHSUNDEEP
javascripthighcharts
Sarahrb
Sarahrb

Reputation: 669

Synchronize zoom between multiple charts

In the below fiddle, how do I synchronize x-axis zoom of all three charts? Thank you.

Fiddle: https://jsfiddle.net/mbfhqsLx/62/

function syncZoom(target, e) {
        var chart = $(target).highcharts(),
            min, max;
        min = e.min === null ? e.dataMin : e.min;
        max = e.min === null ? e.dataMax : e.max;
        syncing = true;
        chart.xAxis[0].setExtremes(min, max);
        syncing = false;          
}

Upvotes: 0

Views: 954

Answers (1)

magdalena
magdalena

Reputation: 3695

You can use afterSetExtremes() to implement synchronized zoom:

  xAxis: {
    events: {
      afterSetExtremes: function(event) {
        Highcharts.charts.forEach(chart => {
          chart.xAxis[0].setExtremes(event.min, event.max);
        })
      }
    }
  }

Demo: https://jsfiddle.net/BlackLabel/w5890cen/

API Reference: https://api.highcharts.com/highcharts/xAxis.events.afterSetExtremes

Upvotes: 1

Related Questions