How to synchronize the axes on multiple charts?

In this tutorial, I will share how to create interactive synchronized charts using Highcharts.

In case you have to create many charts to get the best insight from your data, it could be a smart idea to bind them so that it’s easy to compare and get better reading (see demo below)

To achieve that, you can synchronize multiple charts from multiple containers to always have the same extremes, ticks, and tick intervals.

The first step is to declare a function that iterates over each chart on the page and adjusts the extremes (min/max) and the tick positions to match the first chart on the page (the main one).

Highcharts.charts.forEach(function(chart) {
  if (chart !== mainChart) {
    if (chart[e.target.coll][0].setExtremes) {
      chart[e.target.coll][0].update({
        min: e.min,
        max: e.max,
        tickPositions: tickPositions
      });
    }
  }
})

The second step is to make the secondary chart respond to zooming. You need to add a listener to the axis event called afterSetExtremes and call that method only for the first chart. To ensure that it only fires for the first chart, you must add a flag called otherChartsFollowAxes to the first (main) chart config.

Highcharts.addEvent(Highcharts.Axis, "afterSetExtremes", function (e) {
  if (this.chart.options.chart.otherChartsFollowAxes) {
    syncAxis.call(this, e);
  }
});

The last step is to synchronize the charts during the initial rendering. To do so, add the Highcharts.lastChartRender property. Based on that, the last part of that plugin can be fired to synchronize axis extremes.

Highcharts.addEvent(Highcharts.Chart, "load", function (e) {
  const mainChart = Highcharts.charts[0];
  if (Highcharts.lastChartRender) {
    mainChart.xAxis[0].setExtremes(
      mainChart.xAxis[0].min,
      mainChart.xAxis[0].max
    );
  }
});

I hope this demo tutorial helps you to create an efficient synchronized chart. Let me know your thoughts in the comment section below.