Sync Tooltip and Crosshair across Multiple Charts - CanvasJS JavaScript Charts

Sync Tooltip and Crosshair across Multiple Charts - CanvasJS JavaScript Charts

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 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 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){
	otherChartCanvas1.dispatchEvent(createEvent(
		e.type,
		e.screenX,
		e.screenY + chart1.get("height"), chart2.axisX[0].convertValueToPixel(chart1.axisX[0].convertPixelToValue(e.clientX)),
		e.clientY + chart1.get("height")
	));
});




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, startY, length) {
	var dataPoints = [];
	var y1 = startY;

	for (var i = 0; i < length; i += 1) {
		y1 += (Math.random() * 10 - 5) << 0;
		dataPoints.push({x: i + startX, y: y1});
	}
	return dataPoints;
}