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 data2 = {
				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',
					type: 'line',
					order: 0
				}, 
				{
					label: 'For rent',
					borderColor: 'rgb(54, 162, 235)',
					backgroundColor: 'rgb(54, 162, 235)',
					fill: false,
					data: [4,5,6,7],
					yAxisID: 'y1',
					order: 1
				}]
			};

			const options2 = {
				responsive: true,
				interaction: {
				  mode: 'index',
				  intersect: false,
				},
				stacked: false,
				plugins: {
				  title: {
					display: true,
					text: 'Chart.js Combo Bar & 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: 'bar',
					data: data2,
					options: options2
				});
</script>