JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
	<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.js"></script>

	<!-- this 2 are for zoom plugins -->
	<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
	<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.2.0/dist/chartjs-plugin-zoom.min.js"></script>

	<style>
		body {
			font-family: Arial, sans-serif;
			margin: 0;
			padding: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
		}
		.chart-container {
			position: relative;
			width: 90%;
			height: 200px;
			background-color: black;
			color: white;
		}
		
		#chart {
			width: 100%;
		}
		</style>
	</head>
<body>
	<div class="chart-container" id="chart-container" style="text-align:center;">
		<canvas id="chart" style="display: inline-block;"></canvas>
	</div>


	<script>
		const ctx = document.getElementById('chart').getContext('2d');

		let data = [];
		
		function generateRandomData(numPoints) {
			let currentDate = new Date();

			for (let i = 0; i < numPoints; i++) {
				const rand_plus_or_minus = Math.round(Math.random()) * 2 - 1;
				
				const y = Math.random() * 100 + 50;

				new_date = parseInt(currentDate.getTime()/1000)*1000 + i * 24 * 60 * 60 * 1000;

				data.push({
					x: new_date,
					y: y,
				});
			}
			return data;
		}

		var rawData = generateRandomData(50);

    

		const chart = new Chart(ctx, {
			type: 'line',
			data: {
				datasets: [
					{
						type: 'line',
						label: 'Dataset 1',
						data: data,
						borderColor: chartLineColor,
						backgroundColor: chartLineColor,
						borderWidth: 1,
						fill: false,
						pointStyle: 'circle',
						hoverRadius: 5,
					},
				],
			},
			options: {
					animation: false,
					responsive: true,
					maintainAspectRatio: false,
				elements: {
					point:{
						radius:...