JSFiddle - React, Tailwind, and code Playground

by loicbourgois

HTML

<script src="https://www.chartjs.org/chartjs-chart-financial/moment.js"></script>
<script src="https://rawgit.com/loicbourgois/d58b440ab0626cadd0fb26b541b23cea/raw/f89ba330af632f69928d5d262a5207cee6f802cd/chart.border-hover-2.js"></script>
<script src="https://www.chartjs.org/chartjs-chart-financial/utils.js"></script>
<script src="https://www.chartjs.org/chartjs-chart-financial/Chart.Financial.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', 1);

		// 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',
				},
			},
		});
    
    // 
		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',
				},
			},
		});