samples/zoom-separately.html

<!doctype html>
<html>

<head>
	<title>Chart.js Zoom each scale separately</title>
	<script src="../node_modules/chart.js/dist/chart.js"></script>
	<script src="../node_modules/hammerjs/hammer.min.js"></script>
	<script src="../dist/chartjs-plugin-zoom.min.js"></script>

	<style>
	canvas {
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
	}
	</style>
</head>

<body>
	<canvas id="canvas"></canvas>
	<script>
		function genData() {
			var analogData = [];
			var digitalData = [];
			var angle = 1980;
			var limit = 35;
			for (var x = 0; x <= angle; x += 10) {
				var y = Math.sin(x * Math.PI / 180) * limit;
				analogData.push({x, y});

				y = x === 0 ? -limit : x === angle ? limit : y;
				if (y === limit || y === -limit) {
					digitalData.push({x, y: y === -limit});
				}
			}

			return [analogData, digitalData];
		}

		function createConfig() {
			var [analogData, digitalData] = genData();
			return {
				data: {
					datasets: [{
						yAxisID: 'yA',
						label: 'Temperature',
						type: 'line',
						fill: false,
						borderColor: 'rgb(54, 162, 235)',
						data: analogData
					}, {
						yAxisID: 'yB',
						label: 'Heater',
						type: 'line',
						fill: false,
						steppedLine: true,
						borderColor: 'rgb(255, 99, 132)',
						data: digitalData
					}]
				},
				options: {
					responsive: true,
					title: {
						display: true,
						text: 'Chart.js Zoom each scale separately'
					},
					scales: {
						x: {
							type: 'linear',
							offset: true,
							scaleLabel: {
								display: true,
								labelString: 'x axis'
							}
						},
						yA: {
							id: 'A',
							offset: true,
							position: 'left',
							scaleLabel: {
								display: true,
								labelString: 'Analog'
							}
						},
						yB: {
							id: 'B',
							position: 'right',
							scaleLabel: {
								display: true,
								labelString: 'Digital'
							},
							ticks: {
								max: 2,
								min: -1,
								stepSize: 1
							}
						}
					},
					plugins: {
						zoom: {
							pan: {
								enabled: true,
								mode: 'x',
								scaleMode: 'y'
							},
							zoom: {
								wheel: {
									enabled: true,
								},
								pinch: {
									enabled: true,
								},
								mode: 'x',
								scaleMode: 'y'
							}
						}
					}
				}
			};
		}

		window.onload = function() {
			var ctx = document.getElementById('canvas').getContext('2d');
			var config = createConfig();
			window.myChart = new window.Chart(ctx, config);
		};
	</script>
</body>

</html>