Sync Zooming and Panning Across Vertical and Horizontal axes in range-bar and area charts - CanvasJS JavaScript Charts

Sync Zooming and Panning Across Vertical and Horizontal axes in range-bar and area charts - CanvasJS JavaScript Charts

by canvasjs

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

//--------------- Chart 1 ---------------//
 var chart1 = new CanvasJS.Chart("chartContainer1", {
   zoomEnabled: true,
   zoomType: "xy", // change it to "xy" to enable zooming on both axes
   title: {
     text: "Chart1 - Try Zooming / Panning"
   },
   data: [{
     type: "rangeBar",
     dataPoints: [
     		{x: 0, y: [ 1,2.5]},  
				{x: 1, y: [ 2,3]},
				{x: 2, y: [ 2.5,4]},
				{x: 3, y: [ 3,4.5]},
				{x: 4, y: [ 2,5.5]},
				{x: 5, y: [ 2,3]},
				{x: 6, y: [ 2,2]}
     ]
   }],
   rangeChanged: syncHandler
 });

 chart1.render();

 //--------------- Chart 2 ---------------//
 var chart2 = new CanvasJS.Chart("chartContainer2", {
   zoomEnabled: true,
   zoomType: "xy", // change it to "xy" to enable zooming on both axes
   title: {
     text: "Chart2 - Try Zooming / Panning"
   },
   data: [{
     type: "area",
     dataPoints: [
     		{ x: 0, y: 2 },
        { x: 1, y: 5 },
        { x: 2, y: 4 },
        { x: 3, y: 3.5 },
        { x: 4, y: 1 },
        { x: 5, y: 4 },
        { x: 6, y: 3 }
     ]
   }],
   rangeChanged: syncHandler
 });

 chart2.render();

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

 function syncHandler(e) {

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

     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;
       chart.options.axisY.viewportMinimum = chart.options.axisY.viewportMaximum = null;
       chart.render();

     } else if (chart !== e.chart) {
     	console.log(e)
       chart.options.axisY.viewportMinimum = e.axisX[0].viewportMinimum;
       chart.options.axisY.viewportMaximum = e.axisX[0].viewportMaximum;

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