JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://www.chartjs.org/chartjs-chart-financial/moment.js"></script>
<script src="https://www.chartjs.org/chartjs-chart-financial/Chart.js"></script>
<script src="https://www.chartjs.org/chartjs-chart-financial/Chart.Financial.js"></script>
<script src="https://www.chartjs.org/chartjs-chart-financial/utils.js"></script>
	<a href="../index.html">Home</a>
	<div class="content">
		<h2>Candlestick</h2>
		<div style="width:1000px">
			<canvas id="chart1"></canvas>
		<div>
		<h2>Custom Candlestick</h2>
		<div style="width:1000px">
			<canvas id="chart2"></canvas>
		<div>
		<h2>Candlestick with long tooltip</h2>
		<div style="width:1000px">
			<canvas id="chart3"></canvas>
		<div>
	</div>

JavaScript

var data = getRandomData('April 01 2017', 60);

		// Candlestick
		var ctx = document.getElementById("chart1").getContext("2d");
		ctx.canvas.width = 1000;
		ctx.canvas.height = 250;
		new Chart(ctx, {
			type: 'candlestick',
			data: {
				datasets: [{
					label: "CHRT - Chart.js Corporation",
					data: data,
					fractionalDigitsCount: 2,
					borderColor: '#000',
				}]
			},
			options: {
				tooltips: {
					position: 'nearest',
					mode: 'index',
           callbacks: {


                   label: function (tooltipItem, data) {
return ' x: ' + o + '    dddd: ' + h + '    L: ' + l + '    C: ' + c
               
                 }  ,
                }
				},
			},
		});
    
    // 
		var ctx2 = document.getElementById("chart2").getContext("2d");
		ctx2.canvas.width = 1000;
		ctx2.canvas.height = 250;
		new Chart(ctx2, {
			type: 'candlestick',
			data: {
				datasets: [{
					label: "CHRT - Chart.js Corporation",
					data: data,
					fractionalDigitsCount: 2,
					//borderColor: '#000',
				}]
			},
			options: {
				tooltips: {
					position: 'nearest',
					mode: 'index',
				},
			},
		});