JSFiddle - React, Tailwind, and code Playground

by canvasjs

HTML

<div id="container">
        <div id="chart01Container" ></div>
    </div>
    <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

JavaScript

$.get("https://codepen.io/anon/pen/rKMmma.js", function(data) {
getDataPointsFromCSV(data);
chart01.render();
});
function getDataPointsFromCSV(csv) {
var dataPoints, csvLines, points;

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(",");

chart01.options.data[0].dataPoints.push({label:String(points[0]), y: parseFloat(points[1])});
chart01.options.data[1].dataPoints.push({label:String(points[0]), y: parseFloat(points[2])});
chart01.options.data[2].dataPoints.push({label:String(points[0]), y: parseFloat(points[3])});
chart01.options.data[3].dataPoints.push({label:String(points[0]), y: parseFloat(points[4])});
chart01.options.data[4].dataPoints.push({label:String(points[0]), y: parseFloat(points[5])});
chart01.options.data[5].dataPoints.push({label:String(points[0]), y: parseFloat(points[6])});
chart01.options.data[6].dataPoints.push({label:String(points[0]), y: parseFloat(points[7])});
chart01.options.data[7].dataPoints.push({label:String(points[0]), y: parseFloat(points[8])});
chart01.options.data[8].dataPoints.push({label:String(points[0]), y: parseFloat(points[9])});
}
}

var chart01 = new CanvasJS.Chart("chart01Container", {
title: {
text: "Today’s Transaction Success Rate from CSV",
},

axisY: {
title: "Transaction Success Rate",
},
data: [
{
type: "line",
name: "Transaction Success Rate",
indexLabel: "{y}",
showInLegend: true,
dataPoints: []
},
{
type: "line",
percentFormatString:"#0.##",
name: "ATO Online",
showInLegend: true,
dataPoints: []
},
{
type: "line",
name: "TAP",
showInLegend: true,
dataPoints: []
},
{
type: "line",
name: "BP",
showInLegend: true,
dataPoints: []
},
{
type: "line",
name: "ICP",
showInLegend: true,
dataPoints: []
},
{
type: "line",
name: "Siebel",
showInLegend: true,
dataPoints: []
},
{
type: "line",
name: "ABR",
showInLegend: true,
dataPoints: []
},
{
type: "line",
name: "SBR1",
showInLegend:...