JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<button type="button" id="5s" class="period" value="5" range="second">5s</button>
<button type="button" id="10s" class="period" value="10" range="second">10s</button>
<button type="button" id="30s" class="period" value="30" range="second">30s</button>
<button type="button" id="1m" class="period" value="1" range="minute">1m</button>
<button type="button" id="5m" class="period" value="5" range="minute">5m</button>
<button type="button" id="10m" class="period" value="10" range="minute">10m</button>
<button type="button" id="1h" class="period" value="1" range="hour">1h</button>
<button type="button" id="2h" class="period" value="2" range="hour">2h</button>
<button type="button" id="6h" class="period" value="6" range="hour">6h</button>
<button type="button" id="all" class="period" value="all">All</button>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",{
  zoomEnabled: true,
  title:{
    text: "Aggregation of dataPoints based on Range Selection"
  },
  axisX: {
    valueFormatString: "DD/MM/YY hh:mm:ss tt"
  },
  data: [
    {
      type: "candlestick",
      xValueType: "dateTime",
      xValueFormatString: "DD/MM/YY hh:mm:ss tt",
      dataPoints: [     
        {x: new Date(2013,05,01,09,00,30),y:[5997, 6011, 5566, 5842]},
        {x: new Date(2013,05,01,09,10,30),y:[5834, 6093, 5675, 5742]},
        {x: new Date(2013,05,01,09,20,30),y:[5776, 5808, 5118, 5471]},
        {x: new Date(2013,05,01,09,30,30),y:[5480, 6142, 5318, 5735]},
        {x: new Date(2013,05,01,09,40,30),y:[5756, 6309, 5700, 6299]},
        {x: new Date(2013,05,01,09,50,30),y:[6289, 6342, 5972, 6176]},
        {x: new Date(2013,05,01,10,00,30),y:[5997, 6011, 5566, 5842]},
        {x: new Date(2013,05,01,10,10,30),y:[5834, 6093, 5675, 5742]},
        {x: new Date(2013,05,01,10,20,30),y:[5776, 5808, 5118, 5471]},
        {x: new Date(2013,05,01,10,30,30),y:[5480, 6142, 5318, 5735]},
        {x: new Date(2013,05,01,10,40,30),y:[5756, 6309, 5700, 6299]},
        {x: new Date(2013,05,01,10,50,30),y:[6289, 6342, 5972, 6176]},
        {x: new Date(2013,05,01,11,00,30),y:[5997, 6011, 5566, 5842]},
        {x: new Date(2013,05,01,11,10,30),y:[5834, 6093, 5675, 5742]},
        {x: new Date(2013,05,01,11,20,30),y:[5776, 5808, 5118, 5471]},
        {x: new Date(2013,05,01,11,30,30),y:[5480, 6142, 5318, 5735]},
        {x: new Date(2013,05,01,11,40,30),y:[5756, 6309, 5700, 6299]},
        {x: new Date(2013,05,01,11,50,30),y:[5756, 6309, 5700, 6299]},
        {x: new Date(2013,05,01,12,00,30),y:[6289, 6342, 5972, 6176]},
        {x: new Date(2013,05,01,12,10,30),y:[5997, 6011, 5566, 5842]},
        {x: new Date(2013,05,01,12,20,30),y:[5834, 6093, 5675, 5742]},
        {x: new Date(2013,05,01,12,30,30),y:[5776, 5808, 5118, 5471]},
        {x: new Date(2013,05,01,12,40,30),y:[5480, 6142, 5318, 5735]},
     ...