JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

function getDataPointsFromCSV(url, chart) {
  $.when($.get(url, function(data) {
    chart.options.data[0].dataPoints = [];
    var allLinesArray = data.split("\n");
    if( allLinesArray.length > 0 ){
      for (var i = 0; i < allLinesArray.length; i++) {
        var rowData = allLinesArray[i].split(",");
        chart.options.data[0].dataPoints.push({ x: new Date(rowData[0]), y: parseInt(rowData[1]) });
      }
    }
  })).then(function( data, textStatus, jqXHR ) {  
  	chart.render();
  });
}
var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Line Chart from CSV",
  },
  data: [{
      type: "line", 
      dataPoints: []
  }]
});

getDataPointsFromCSV("https://docs.google.com/spreadsheets/d/e/2PACX-1vQQGUwhqdT2bomIp_Bf_YW3LCZAkKHKVrXYvEh7HENG4LdH8H9vvAi3CeXCST-RloicB_8UpRJ8pv4F/pub?gid=0&single=true&output=csv", chart);

var updateChart = function () {
  getDataPointsFromCSV("https://docs.google.com/spreadsheets/d/e/2PACX-1vQQGUwhqdT2bomIp_Bf_YW3LCZAkKHKVrXYvEh7HENG4LdH8H9vvAi3CeXCST-RloicB_8UpRJ8pv4F/pub?gid=0&single=true&output=csv", chart);
};

setInterval(function(){updateChart()}, 1000);