JSFiddle - React, Tailwind, and code Playground

by lvlaxpt

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<canvas id="myChart" width="400" height="400"></canvas>
<script>
	const data1 = {
						labels: ["jan", "feb", "mac", "apr"],
						datasets: [{
							label: 'For sale',
							borderColor: 'rgb(255, 99, 132)',
							backgroundColor: 'rgb(255, 99, 132)',
							fill: false,
							data: [3, 2, 3, 4],
							yAxisID: 'y',
						}, 
						{
							label: 'For rent',
							borderColor: 'rgb(54, 162, 235)',
							backgroundColor: 'rgb(54, 162, 235)',
							fill: false,
							data: [4,5,6,7],
							yAxisID: 'y1'
						}]
					};

				const options1 = {
					responsive: true,
					interaction: {
					  mode: 'index',
					  intersect: false,
					},
					stacked: false,
					plugins: {
					  title: {
						display: true,
						text: 'Chart.js Line Chart - Multi Axis'
					  }
					},
					scales: {
					  y: {
						type: 'linear',
						display: true,
						position: 'left',
					  },
					  y1: {
						type: 'linear',
						display: true,
						position: 'right',
				
						// grid line settings
						grid: {
						  drawOnChartArea: false, // only want the grid lines for one axis to show up
						},
					  },
					}
				  };

				  new Chart('myChart', {
						type: 'line',
						data: data1,
						options: options1
					});
</script>