JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer1" style="height: 300px; width: 100%;"></div>
<div id="chartContainer2" style="height: 300px; width: 100%;"></div>

JavaScript

//--------------- DataPoints Generator ---------------//
function dataPointsGenerator1(limit) {
  var y = 0;
  var dataPoints = [];
  for (var i = 0; i < limit; i += 1) {
    y += Math.round(5 + Math.random() * (-5 - 5));
    dataPoints.push({
      x: i,
      y: y
    });
  }
  return dataPoints;
}

function dataPointsGenerator2(limit) {
  var y = 0;
  var dataPoints = [];
  for (var i = 0; i < limit; i += 1) {
    y += Math.round(5 + Math.random() * (-36));
    dataPoints.push({ 
      x: i,
      y: y
    });
  }
  return dataPoints;
}

var dataPoints1 = dataPointsGenerator1(100);
var dataPoints2 = dataPointsGenerator2(100)

//--------------- Chart 1 ---------------//
var chart1 = new CanvasJS.Chart("chartContainer1", {
  zoomEnabled: true,
  zoomType: "x", // change it to "xy" to enable zooming on both axes
  title: {
    text: "Synching Zooming & Panning across Multiple Charts"
  },
  data: [{
    type: "line",
    dataPoints: dataPoints1
  }],
  rangeChanged: syncHandler
});

chart1.render();

//--------------- Chart 2 ---------------//
var chart2 = new CanvasJS.Chart("chartContainer2", {
  zoomEnabled: true,
  zoomType: "x", // change it to "xy" to enable zooming on both axes
  data: [{
    type: "line",
    dataPoints: dataPoints2
  }],
  rangeChanged: syncHandler
});

chart2.render();

//--------------- Syncing the charts ---------------//
var charts = [chart1, chart2]; // add all charts (with axes) to be synced

alignAxis();

function syncHandler(e) {

  for (var i = 0; i < charts.length; i++) {

    var chart = charts[i];

    charts[i].axisY[0].set("margin", 0, false);

    if (!chart.options.axisX)
      chart.options.axisX = {};

    if (!chart.options.axisY)
      chart.options.axisY = {};

    if (e.trigger === "reset") {

      chart.options.axisX.viewportMinimum = chart.options.axisX.viewportMaximum = null;
      
    } else if (chart !== e.chart) {

      chart.options.axisX.viewportMinimum = e.axisX[0].viewportMinimum;
     ...