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.min.js"></script>
<div id="chartContainer" style="width:100%; height:300px;"></div>

JavaScript

window.onload = function() {
  var dps = [];
  var dpsInView = 10;

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

    for (var i = 0; i < csvLines.length; i++)
      if (csvLines[i].length > 0) {
        points = csvLines[i].split(",");

        splitDateTime = points[0].split(" ");
        splitDate = splitDateTime[0].split("-");
        splitTime = splitDateTime[1].split(":");

        date = new Date(splitDate[0], splitDate[1], splitDate[2], splitTime[0], splitTime[1]);

        dps[0].push({ 
          x: date, 
          y: parseFloat(points[1]) 		
        }); 
        dps[1].push({ 
          x: date, 
          y: parseFloat(points[2]) 		
        }); 
      }
    return dps;
  }

  var chart = new CanvasJS.Chart("chartContainer", {
    title: {
      text: "Chart from CSV",
    },
    zoomEnabled: true,
    data: [{
      name: "Humidity",
      type: "line",
      dataPoints: []
    },{
      name: "Temperature",
      type: "line",
      dataPoints: []
    }]
  });

  function getData() {
    $.get("https://docs.google.com/spreadsheets/d/e/2PACX-1vRJx-FVmY-OwrNJ-oA9YuVkbXyzdpe-KkiSADuQzvF3U2rlNQUlptoyLRJFkRzwQy4apTrLdkzZWS-m/pub?gid=0&single=true&output=csv", function(data) {
      dps = getDataPointsFromCSV(data);

      chart.options.data[0].dataPoints =  dps[0];
      chart.options.data[1].dataPoints =  dps[1];
      
      chart.render();
      //setting viewport to view last limit dataPoints
      chart.axisX[0].set("viewportMinimum", dps[0][dps[0].length - 1 - dpsInView].x)
      setTimeout(getData, 2000);
    });	
  }
  
  getData();
}