Sync Tooltip and Crosshair across Multiple Charts - CanvasJS JavaScript Charts

Sync Tooltip and Crosshair across Multiple Charts - CanvasJS JavaScript Charts

by canvasjs

HTML

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

JavaScript

var chart1 = new CanvasJS.Chart("chartContainer1", {
  title: {
    text: "Chart 1"
  },
  toolTip:{
    shared: true
  },  
  axisX: {
    crosshair: {
      enabled: true
    },
  },
  data: [{
    type: "line",
    dataPoints: randomData(1, 50, 1000)
  }]
});

var chart2 = new CanvasJS.Chart("chartContainer2", {
  title: {
    text: "Chart 2"
  },
  toolTip:{
    shared: true
  },  
  axisX: {
    crosshair: {
      enabled: true
    },
  },
  data: [{
    type: "line",
    dataPoints: randomData(1, 50, 1000)
  }]
});

chart1.render();
chart2.render();

var heightRatio = (chart1.plotArea.y2 - chart1.plotArea.y1)/ (chart2.plotArea.y2 - chart2.plotArea.y1);

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

$("#chartContainer2").on("mousemove mouseup mousedown mouseout", function(e){
  otherChartCanvas.dispatchEvent(createEvent(
    e.type,
    e.screenX,
    e.screenY - chart2.get("height"), chart1.axisX[0].convertValueToPixel(chart2.axisX[0].convertPixelToValue(e.clientX)),
    e.clientY - chart2.get("height")
  ));
});

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

$("#chartContainer1").on("mousemove mouseup mousedown mouseout", function(e){
  var parentOffset = $("#chartContainer1").offset();
  otherChartCanvas1.dispatchEvent(createEvent(
    e.type,
    e.screenX,
    e.screenY + chart1.get("height"),
    chart2.axisX[0].convertValueToPixel(chart1.axisX[0].convertPixelToValue(e.clientX)),
    ((e.clientY - ((e.pageY - e.clientY) <= chart1.plotArea.y1 ? chart1.plotArea.y1 : 0)) / heightRatio) + $("#chartContainer2").offset().top + chart2.plotArea.y1 - (e.pageY - e.clientY)
  ));
});

function createEvent(type, screenX, screenY, clientX, clientY){
  var event = new MouseEvent(type, {
    view: window,
    bubbles: false,
    cancelable: true,
    screenX: screenX,
    screenY: screenY,
    clientX: clientX,
    clientY: clientY
  });
  return event;
}

function randomData(startX,...