JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.stock.min.js"></script>

<div id="chartContainer" style="height: 450px; width: 100%;"></div>

JavaScript

window.onload = function () {
  var dps1 = [], dps2= [];
  var completeDPS = [];
  var stockChart = new CanvasJS.StockChart("chartContainer",{
    theme: "light2",
    exportEnabled: true,
    title:{
      text:"StockChart with Date-Time Axis"
    },
    subtitles: [{
      text: "Navigator contains only data which are selected from Range Buttons"
    }],
    rangeChanged: rangeChanged,
    charts: [{
      axisX: {
        crosshair: {
          enabled: true,
          snapToDataPoint: true
        }
      },
      axisY: {
        prefix: "$"
      },
      data: [{
        type: "candlestick",
        yValueFormatString: "$#,###.##",
        dataPoints : dps1
      }]
    }],
    navigator: {
      data: [{
        dataPoints: dps2
      }],
      slider: {
      
      }
    },
    rangeSelector: {
      //selectedRangeButtonIndex: 2
    }
  });
  $.getJSON("https://canvasjs.com/data/docs/btcusd2018.json", function(data) {
    for(var i = 0; i < data.length; i++){
      completeDPS[new Date(data[i].date).getTime()] = {x: new Date(data[i].date), y: [Number(data[i].open), Number(data[i].high), Number(data[i].low), Number(data[i].close)]};
    }

    for (var date in completeDPS) {
      if(completeDPS.hasOwnProperty(date)) {
        dps1.push(completeDPS[date]);
        dps2.push({ x: completeDPS[date].x, y: completeDPS[date].y[3] });
      }
    }

    stockChart.render();
    rangeChanged({minimum: stockChart.navigator.slider.minimum, maximum: stockChart.navigator.slider.maximum, source: "buttons", index: 2 })
  });

  function rangeChanged(e) {
    var minimum = parseInt(e.minimum) - 24 * 60 * 60 * 1000;
    var maximum = parseInt(e.maximum) + 24 * 60 * 60 * 1000;

    if(e.source == "buttons") {
     stockChart.options.charts[0].data[0].dataPoints = dps1 = [];
      stockChart.options.navigator.data[0].dataPoints = dps2 = [];
      stockChart.options.rangeSelector.selectedRangeButtonIndex = e.index;
      
      for (var date in completeDPS) {
        if(...