JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="my-chart"></canvas>

JavaScript

const ctx = document.getElementById('my-chart').getContext('2d');

new Chart(ctx,
{
	type: 'bar',
	data:
	{
		labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
		datasets: 
		[
			{
				label: 'Activities',
				backgroundColor: '#000',
				data: [5, 33, 24, 6, 14, 5, 8, 10, 5, 4, 0, 0],
			},
			{
				label: 'Grand total',
				backgroundColor: '#eb4034',
				data: [0, 300.96, 482.98, 153.75, 463.71, 70.36, 3025.80, 1142.00, 2266.89, 1660.50, 0, 0],
			},
		]
	},
	options:
	{
		responsive: true,
		maintainAspectRatio: false,
		elements:
		{
			line:
			{
				tension: 0.4,
				borderJoinStyle: 'round',
			}
		},
		tooltips:
		{
			mode: 'index',
			intersect: false,
		},
		hover:
		{
			mode: 'nearest',
			intersect: true
		},
		scales:
		{
			xAxes: 
			[
				{
					gridLines:
					{
						display: false
					},
				}
			],
			yAxes: 
			[
				{
					gridLines:
					{
						display: true,
						color: '#d9dffa',
						drawBorder: false,
						offsetGridLines: false,
						drawTicks: false,
						borderDash: [3,5],
						zeroLineWidth: 1,
						zeroLineColor: '#d9dffa',
						zeroLineBorderDash: [3,4]
					}
				}
			]
		},
		legend: 
		{
			display: false,
		}
	},
});