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: {
        minimum: new Date(2018, 04, 01),
        maximum: new Date(2018, 06, 01)
      }
    }
  });
  $.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();
  });
  
  function rangeChanged(e) {
  	var minimum = parseInt(e.minimum);
    var maximum = parseInt(e.maximum);
    
    if(e.source == "buttons") {
		stockChart.options.charts[0].data[0].dataPoints = dps1 = [];
		stockChart.options.navigator.data[0].dataPoints = dps2 = [];
		
		for (var date in completeDPS) {
		
			if( ((date >= minimum && date <= maximum) || e.index == 5) && completeDPS.hasOwnProperty(date)) {
				dps1.push(completeDPS[date]);
				dps2.push({ x: completeDPS[date].x, y: completeDPS[date].y[3] });
			}
		}
		stockChart.render();
	}
  }
}