JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div >
<div id="chartContainer1"  class="rotate" style="height: 300px; width: 30%; display: inline-block; margin: 25px 25px 25px 25px;"></div>
<div id="chartContainer2" class="rotate"  style="height: 300px; width: 30%; display: inline-block; margin: 25px 25px 25px 25px;"></div>
</div>

CSS

.rotate {
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    position: relative;
    left: 50px;
}

.canvasjs-chart-tooltip {
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
}

JavaScript

var chart1 = new CanvasJS.Chart("chartContainer1", {
  theme: "light2",
  title: {
    text: "Chart 1",
    horizontalAlign: "right",
    verticalAlign: "center"
  },
  toolTip:{
    shared: true,
  },
  axisX2: {
    crosshair: {
      enabled: true
    },
    labelAngle: 90
  },
  axisY: {
    labelAngle: 90
  },
  data: [{
    type: "line",
    axisXType: "secondary",
    dataPoints: randomData(1, 50, 1000)
  },{
    type: "line",
    axisXType: "secondary",
    dataPoints: randomData(1, 30, 1000)
  },{
    type: "line",
    axisXType: "secondary",
    dataPoints: randomData(1, 30, 1000)
  }]
});

var chart2 = new CanvasJS.Chart("chartContainer2", {
  theme: "light2",
  title: {
    text: "Chart 2",
    horizontalAlign: "right",
    verticalAlign: "center"
  },
  toolTip:{
    shared: true
  },
  axisX2: {
    crosshair: {
      enabled: true
    },
    labelAngle: 90
  },
  axisY: {
    labelAngle: 90
  },
  data: [{
    type: "line",
    axisXType: "secondary",
    dataPoints: randomData(1, 50, 1000)
  },{
    type: "line",
    axisXType: "secondary",
    dataPoints: randomData(1, 90, 1000)
  }]
});

$(window).on("resize",function(){
  chart1.set("height",$("#chartContainer1").width());
  chart2.set("height",$("#chartContainer2").width());
  chart1.render();
  chart2.render();
})
chart1.render();
chart2.render();

chart1.set("height",document.getElementById("chartContainer1").clientWidth, false);
chart1.set("width",300);
chart2.set("height",document.getElementById("chartContainer2").clientWidth, false);
chart2.set("width",300);

var otherChartCanvas = $("#chartContainer1").find(".canvasjs-chart-canvas").get(1);

$("#chartContainer2").on("mousemove mouseup mousedown mouseout", function(e){
  otherChartCanvas.dispatchEvent(createEvent(
    e.type,	
    e.screenX - chart2.get("height"),
    e.screenY,  
    e.clientX - chart2.get("height"),
    e.clientY

  ));
});

var otherChartCanvas1 =...