sync chart

by abuk_kuba

HTML

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

JavaScript

var chart1 = new CanvasJS.Chart("chartContainer1", {
        zoomEnabled: true,
        rangeChanged: syncHandler,
		legend: {
			horizontalAlign: "center", // "center" , "right"
			verticalAlign: "bottom",  // "top" , "bottom"
			fontSize: 12
		},
		toolTip:{
			content:"{y}V" 
			
			//shared: true
		},
		axisX: {
			intervalType: "day",
			interval: 1,
			interlacedColor: "#F0F8FF", 
			valueFormatString: "DD\nMMM", 
			labelAutoFit: true,
			labelFontSize: 12,
			crosshair:{
				enabled: true, //disable here
				labelFormatter: function(e) {
				return CanvasJS.formatDate(e.value, "HH:mm")
				}
			}
		},
		axisY: {
			title: "Voltage [V]",
			 includeZero: false,
			 titleFontSize:12,
			 labelFontSize:12
		},
		data: [		
        {
			type: "line",
			showInLegend: true,
			legendText: "Aux Voltage",
			
			xValueType: "dateTime",            
        dataPoints: randomData(1, 50, 30)
        },
		{
			type: "line",
			showInLegend: true,
			legendText: "Base Voltage",
			xValueType: "dateTime",            
        dataPoints: randomData(1, 50, 30)
        },
        ]
    });
	
	var chart2 = new CanvasJS.Chart("chartContainer2", {
        zoomEnabled: true,
       rangeChanged: syncHandler,
		legend: {
			horizontalAlign: "center", // "center" , "right"
			verticalAlign: "bottom",  // "top" , "bottom"
			fontSize: 12
		},
		toolTip:{
			content:"{y}" ,
			
		},	
		axisX: {
			intervalType: "day",
			interval: 1,
			interlacedColor: "#F0F8FF", 
			valueFormatString: "DD\nMMM", 		
			labelAutoFit: true,
			labelFontSize: 12,
			crosshair:{
				enabled: true, //disable here
				labelFormatter: function(e) {
				return CanvasJS.formatDate(e.value, "HH:mm")
				}
			} ,
		},
		axisY: {
			title: "Current [A]",
			
			 includeZero: false,
			 titleFontSize:12,
			 labelFontSize:12
		},
        data: [	
        {
			type: "spline",
			showInLegend: true,
			color: "black",
			legendText: "Current [A]",			
			xValueType: "dateTime",            
           ...