Syncing Crosshair & ToolTip across Multiple Charts - CanvasJS JavaScript Charts

Syncing Crosshair & ToolTip across Multiple Charts - CanvasJS JavaScript Charts

by canvasjs

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: 300px; width: 100%;"></div>
<div id="chartContainer2" style="height: 300px; 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 = $("#chartContainer2").find(".canvasjs-chart-canvas").get(1);

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

function createEvent(type, screenX, screenY, clientX, clientY){
	var event = new MouseEvent(type, {
		view: window,
		bubbles: true,
		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;
}