JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.stock.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the StockChart -->
<div id="stockChartContainer" style="height: 450px; width: 100%;"></div>

JavaScript

var dataPoints = [

  { x: new Date(2018, 01, 5,12,30,2), y: [5198, 5629, 5159, 5385] },
  { x: new Date(2018, 01, 5,15,30,15), y: [5296, 5378, 5154, 5248] },
  { x: new Date(2018, 01, 5,22,30,15), y: [5254, 5279, 4788, 4924] },
  { x: new Date(2018, 01, 6,10,30,30), y: [4910, 5286, 4770, 5278] },
  { x: new Date(2018, 04, 6,10,30,30), y: [5283, 5348, 5032, 5229] },
  { x: new Date(2018, 04, 10,10,30,30), y: [5220, 5448, 5164, 5258] },
  { x: new Date(2018, 04, 15,10,30,30), y: [5276, 5735, 5215, 5703] },

];

var stockChart = new CanvasJS.StockChart("stockChartContainer", {
  title:{
    text: "Basic StockChart"
  },
  exportEnabled: true,
  charts: [{
    data: [{
      type: "candlestick",
      risingColor: "#3BD80D",
      fallingColor: "#fd5d93",				
      yValueFormatString: "###", 
      dataPoints: dataPoints
    }]
  }],
  navigator: {

  },
  rangeSelector: {
    inputFields: {
      enabled: false,
    },		
    buttons: [{
      range: 1, 
      rangeType: "minute",
      label: "1minute"
    },{
      range: 1, 
      rangeType: "hour",
      label: "1hour"
    },{
      range: 1, 
      rangeType: "day",
      label: "1day"
    },{            
      range: 1,
      rangeType: "month",
      label: "1Month"
    },{            
      rangeType: "all",
      label: "Show All" //Change it to "All"

    }],
  },
});

stockChart.render();