<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],
}], {
	title: 'Scroll and Zoom',
	height: window.innerHeight,
	margin: {t: 10, r: 10, b: 30, l: 20},
	updatemenus: [{
		type: 'buttons',
		showactive: false,
		pad: {b: 10},
		xanchor: 'left',
		yanchor: 'bottom',
		direction: 'right',
		buttons: [{
			method: 'relayout',
			args: ['xaxis.range', [+new Date('2020-10-04'), +new Date('2021-11-04')]],
			label: 'Zoom in'
		}, {
			method: 'relayout',
			args: ['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.