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:450px;"></div>

JavaScript

var data = [], dataPoints = [];

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Multi-Series Chart with Data from CSV",
  },
  toolTip: {
    shared: true
  },
  data: data
});

$.get("https://docs.google.com/spreadsheets/d/e/2PACX-1vQUG-72pic-dq74FxrFAbBhIfHNjLcGANmehYAvu048KPnTni8RXuAuYKRDlJzrDSjdAtvOl-2TM0KV/pub?output=csv", parseData);

function parseData(csv) {
  var dataPoints = csvLines = points = [];
  csvLines = csv.split(/[\r?\n|\r|\n]+/);   
  var noOfSeries = (csvLines[0].split(",").length - 2)/3;
  for(var j = 0; j < noOfSeries; j++)
    chart.options.data.push({ type: "scatter", showInLegend: true, dataPoints: [] }); 

  for (var i = 2; i < csvLines.length; i++) {
    if (csvLines[i].length > 0) {
      points = csvLines[i].split(",");
      points.splice(0,2);
      for(var j = 0; j < points.length - 1; j += 3) {
        chart.options.data[j/3].dataPoints.push({
          x: Number(points[j]), 
          y: Number(points[j+1])
        });
      }
    }
  }
  chart.render();
}