<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="myDiv"></div>
	<button id="in">Zoom in</button>
	<button id="out">Zoom out</button>
</body>

Plotly.newPlot('myDiv', [{
 	x: ['2020-10-04', '2021-11-04', '2023-12-04'],
	y: [90, 40, 60],
}], {
	title: 'Scroll and Zoom',
	height: window.innerHeight - 40,
	margin: {t: 40, r: 10, b: 30, l: 20},
});

document.getElementById('in').addEventListener('click', function () {
	Plotly.relayout('myDiv', 'xaxis.range', [+new Date('2020-10-04'), +new Date('2021-11-04')])
})
document.getElementById('out').addEventListener('click', function () {
	Plotly.relayout('myDiv', 'xaxis.range', [+new Date('2020-10-04'), +new Date('2023-12-04')])
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.