Syncing axis zooms across multiple charts

XY#cursor#events#xy

This demo shows how we can sync zoom of an X-axes across multiple charts.

Code

The function that performs syncing:

TypeScript

function syncAxes(targetChart) {
  let targetAxis = targetChart.xAxes.getIndex(0);
  if (targetAxis._skipSync != true) {
    let start = targetAxis.get("start");
    let end = targetAxis.get("end");
    am5.array.each(chartsToSync, function(chart) {
      if (chart != targetChart) {
        let axis = chart.xAxes.getIndex(0);
        axis._skipSync = true;
        axis.setAll({
          start: start,
          end: end
        })
        axis._skipSync = false;
      }
    });
  }
}

JavaScript

function syncAxes(targetChart) {
  var targetAxis = targetChart.xAxes.getIndex(0);
  if (targetAxis._skipSync != true) {
    var start = targetAxis.get("start");
    var end = targetAxis.get("end");
    am5.array.each(chartsToSync, function(chart) {
      if (chart != targetChart) {
        var axis = chart.xAxes.getIndex(0);
        axis._skipSync = true;
        axis.setAll({
          start: start,
          end: end
        })
        axis._skipSync = false;
      }
    });
  }
}

Using events to monitor changes to start and end settings on each axis:

TypeScript

// Set up syncing
xAxis.on("start", function() {
  syncAxes(chart);
});
xAxis.on("end", function() {
  syncAxes(chart);
});

JavaScript

// Set up syncing
xAxis.on("start", function() {
  syncAxes(chart);
});
xAxis.on("end", function() {
  syncAxes(chart);
});

Demo

ResultJSHTMLCSS

Open in:New tabCodePenjsFiddle

Run

Syncing axis zooms across multiple chartssyncing-axis-zooms-across-multiple-charts