Syncing ToolTip on Multiple Charts - CanvasJS JavaScript Charts

Syncing ToolTip on 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",
{
	zoomEnabled: true,
	toolTip:{
    	shared: true
  },
	data: [
	{
		type: "line",
		dataPoints: randomData(1, 50, 1000)
	}					
	]
});

var chart2 = new CanvasJS.Chart("chartContainer2",
{ 
	zoomEnabled: true,
	toolTip:{
    	shared: 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){
  //console.log(e.type);
	otherChartCanvas.dispatchEvent(createEvent(e.type, e.screenX, e.screenY + 300, 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    
    /* whatever properties you want to give it */
  });
  
  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;
}