JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html><html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Candlestick</title>
<style>
html {
	margin: 0px;
}
body {
	margin: 20px 30px;
}
#realchart {
	width: 850px;
	height: 550px;
    border: 1px solid lightgray;
    margin-bottom: 20px;
}
</style>
<link href="https://unpkg.com/realchart/realchart-style.css" rel="stylesheet" crossorigin="anonymous">
<script type="text/javascript" src="https://unpkg.com/realchart/index"></script>
<script type="text/javascript">
	window.addEventListener('DOMContentLoaded', function () {
		try {
			init();
		} catch (err) {
			alert(err);
			console.error(err);
		}
	});	
	
</script>

  <script>
    var realChartLic = 'upVcPE+wPOkOR/egW8JuxkM/nBOseBrflwxYpzGZyYkhw7qfHRQ+GiF0lY62mJi5KBwoSJHOA48O5+/xJSE3LhLB4LkQ8rWX0QeIbtyyIEGTFVqWmNPdyQ==';
  </script>
</head>
<body>
	<div id="realchart"></div>
	

		 </body></html>

JavaScript

const config = {
  title: {
    text: 'WTI (Woori Tech Inc.)',
    align: 'left',
    style: {
      fill: '#666',
      fontWeight: 700
    }
  },
  xAxis: {
    type: 'time',
    crosshair: true,
    tick: {
      visible: true,
      stepInterval: '1w'
    },
    label: {
      visible: true,
      timeFormat: 'M/d, yyyy'
    }
  },
  yAxis: {
    crosshair: true,
    tick: {
      stepInterval: 1000
    }
  },
  series: [{
    name: 'candle',
    template: 'series',
    type: 'candlestick',
    data: [{
      date: '2021-04-01',
      openprc: 82500,
      highprc: 83000,
      lowprc: 82000,
      closeprc: 82900
    }, {
      date: '2021-04-02',
      openprc: 84000,
      highprc: 85200,
      lowprc: 83900,
      closeprc: 84800
    }, {
      date: '2021-04-05',
      openprc: 85800,
      highprc: 86000,
      lowprc: 84800,
      closeprc: 85400
    }, {
      date: '2021-04-06',
      openprc: 86200,
      highprc: 86200,
      lowprc: 85100,
      closeprc: 86000
    }, {
      date: '2021-04-07',
      openprc: 86100,
      highprc: 86200,
      lowprc: 85400,
      closeprc: 85600
    }, {
      date: '2021-04-08',
      openprc: 85700,
      highprc: 85700,
      lowprc: 84100,
      closeprc: 84700
    }, {
      date: '2021-04-09',
      openprc: 84700,
      highprc: 84900,
      lowprc: 83400,
      closeprc: 83600
    }, {
      date: '2021-04-12',
      openprc: 84100,
      highprc: 84100,
      lowprc: 83100,
      closeprc: 83200
    }, {
      date: '2021-04-13',
      openprc: 83000,
      highprc: 84500,
      lowprc: 82800,
      closeprc: 84000
    }, {
      date: '2021-04-14',
      openprc: 84000,
      highprc: 84300,
      lowprc: 83400,
      closeprc: 84000
    }, {
      date: '2021-04-15',
      openprc: 83700,
      highprc: 84500,
      lowprc: 83400,
      closeprc: 84100
    }, {
      date: '2021-04-16',
      openprc: 84700,
      highprc: 84700,
      lowprc: 83600,
      closeprc: 83900
    }, {
      date:...