JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.stock.min.js"></script>
<script type="text/javascript">
window.onload = function () {
  var dataPoints = [];
  var stockChart = new CanvasJS.StockChart("chartContainer",{
    theme: "light2",
    title:{
      text:"ETH/USD"
    },    
    rangeChanged: function (e) {
    const navigatorMin = e.minimum;
const navigatorMax = e.maximum;

const visiblePoints = dataPoints.filter(point => {
    const pointDate = new Date(point.x);
    return pointDate >= navigatorMin && pointDate <= navigatorMax;
});

let minY = Math.min(...visiblePoints.map(point => point.y[0]));
let maxY = Math.max(...visiblePoints.map(point => point.y[0]));

const padding = (maxY - minY) * 0.1;
minY -= padding;
maxY += padding;

let step = Math.round((maxY - minY) / 10);
step = Math.ceil(step / 100) * 100;
minY = Math.floor(minY / 100) * 100;
maxY = Math.ceil(maxY / 100) * 100;

stockChart.options.charts[0].axisY.interval = step;
stockChart.options.charts[0].axisY.minimum = minY;
stockChart.options.charts[0].axisY.maximum = maxY;
    },
    charts: [{
      axisY: {        
        prefix: "$"
      },
      data: [{
        type: "candlestick",
        yValueFormatString: "$#,###.##",
        dataPoints : dataPoints
      }]
    }],
    rangeSelector: {
      inputFields: {
        startValue: new Date(2018, 03, 01),
        endValue: new Date(2018, 06, 01)
      }
    }
  });
  $.getJSON("https://canvasjs.com/data/docs/ethusd2018.json", function(data) {  
    for(var i = 0; i < data.length; i++){
      dataPoints.push({x: new Date(data[i].date), y: [Number(data[i].open), Number(data[i].high), Number(data[i].low), Number(data[i].close)]});
    }	
    stockChart.render();
  });
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 450px; width: 100%;"></div>
</body>
</html>