JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>

JavaScript

var highDps = [], lowDps = [];

var chart = new CanvasJS.Chart("chartContainer", {
  title:{
    text: "Candle Stick Chart"
  },
  animationEnabled: true,
  zoomEnabled: true,
  axisY: {
    title: "Prices",
    prefix: "$ "
  },
  data: [
    {
      type: "candlestick",
      dataPoints: [
        {x: new Date(2012,01,01),y:[5198, 5629, 5159, 5385]},
        {x: new Date(2012,02,01),y:[5366, 5499, 5135, 5295]},
        {x: new Date(2012,03,01),y:[5296, 5378, 5154, 5248]},
        {x: new Date(2012,04,01),y:[5254, 5279, 4788, 4924]}
      ]
    },
    {
      type: "scatter",
      dataPoints: lowDps
    },
    {
      type: "scatter",
      dataPoints: highDps
    }
    
  ]
});

addExtremes();

function addExtremes() {
	for(var i = 0; i < chart.options.data[0].dataPoints.length; i++) {
  	highDps.push({x: chart.options.data[0].dataPoints[i].x, y: chart.options.data[0].dataPoints[i].y[1]});
    lowDps.push({x: chart.options.data[0].dataPoints[i].x, y: chart.options.data[0].dataPoints[i].y[2]});
  }
  chart.render();
}