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

Plotly.newPlot('myDiv', [{
 	x: ['2020-10-04', '2021-11-04', '2023-12-04'],
	y: [90, 40, 60],
}], {
	xaxis: {
		range: [+new Date('2020-10-04'), +new Date('2023-12-04')]
	},
	height: window.innerHeight,
	title: 'Scroll and Zoom',
	margin: {t: 10, r: 10, b: 30, l: 20},
	updatemenus: [{
		active: 1,
		type: 'buttons',
		pad: {b: 10},
		xanchor: 'left',
		yanchor: 'bottom',
		direction: 'right',
		buttons: [{
			method: 'animate',
			args: [{layout: {
				'xaxis.range': [+new Date('2020-10-04'), +new Date('2021-11-04')]
			}}],
			label: 'Zoom in'
		}, {
			method: 'animate',
			args: [{layout: {
				'xaxis.range': [+new Date('2020-10-04'), +new Date('2023-12-04')]
			}}],
			label: 'Zoom out'
		}]
	}]
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.