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

var dataPoints = [];

function getDataPointsFromCSV(csv) {
  var dataPoints = csvLines = points = [];
  csvLines = csv.split(/[\r?\n|\r|\n]+/);         

  for (var i = 1; i < csvLines.length; i++)
    if (csvLines[i].length > 0) {
      points = csvLines[i].split(",");
      dataPoints.push({ 
        x: new Date(points[0]), 
        y: [parseFloat(points[1]), parseFloat(points[2]), parseFloat(points[3]), parseFloat(points[4])] 		
      });
    }
  return dataPoints;
}

$.get("https://docs.google.com/spreadsheets/d/e/2PACX-1vQdojhePKzTf_NlqRf6eMQdRGmlsmPZRej0HXPAO9IT4rcGYmFJ-u5zsa9pfvA46q5W3MWhBos64rdy/pub?gid=615261800&single=true&output=csv", function(data) {

  var stockChart = new CanvasJS.StockChart("chartContainer",{
    theme: "light2",
    exportEnabled: true,
    title:{
      text:"StockChart from CSV data"
    },
    charts: [{
      axisX: {
        crosshair: {
          enabled: true,
          snapToDataPoint: true
        }
      },
      axisY: {
        prefix: "$"
      },
      data: [{
        type: "candlestick",
        yValueFormatString: "$#,###.##",
        dataPoints : getDataPointsFromCSV(data)
      }]
    }],
    navigator: {
      slider: {
        minimum: new Date(2018, 04, 01),
        maximum: new Date(2018, 06, 01)
      }
    }
  });
  stockChart.render();
});