Sync Y-Axis range across Multiple Chart | CanvasJS

Sync Y axis range across multiple chart | CanvasJS

by katsukino

HTML

<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>

<div class="container">
  <div id="chartContainer" style="height: 300px; width: 100%;"></div>
  <div id="chartContainer2" style="height: 300px; width: 100%;"></div>
</div>

CSS

.container {
  display: flex;
}

JavaScript

window.onload = function () {
  var chart1 = new CanvasJS.Chart("chartContainer", {
    title:{
      text: "First Chart in CanvasJS"              
    },
    data: [              
      {
        type: "spline",
        dataPoints: [
          { y: 10  },
          { y: 100 },
          { y: 20 },
          { y: 45 },
          { y: 35 },
          { y: 65 },
          { y: 60 }
        ]
      }
    ]
  });
  chart1.render();
  var chart2 = new CanvasJS.Chart("chartContainer2", {
    title:{
      text: "Second Chart in CanvasJS"              
    },
    data: [              
      {
        type: "spline",
        dataPoints: [
          { y: 51  },
          { y: 60  },
          { y: 52  },
          { y: 55  },
          { y: 53  },
          { y: 57  },
          { y: 56  }
        ]
      }
    ]
  });
  chart2.render();

  syncAxisYRange([chart1, chart2]);

  function syncAxisYRange(charts) {
    var viewportMinimum = Infinity, viewportMaximum = -Infinity;
    for (var i=0; i<charts.length; i++) {
      viewportMinimum = Math.min(viewportMinimum, charts[i].axisY[0].get("viewportMinimum"));
      viewportMaximum = Math.max(viewportMaximum, charts[i].axisY[0].get("viewportMaximum"));
    }

    for (var i=0; i<charts.length; i++) {
      charts[i].axisY[0].set("viewportMinimum", viewportMinimum, false);
      charts[i].axisY[0].set("viewportMaximum", viewportMaximum);
    }

  }
}