JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

  <div id="chartContainer" style="height: 300px; width: 100%;">
  </div>
<div style="margin-top:16px;color:dimgrey;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration:none;">Source: <a href="https://canvasjs.com/docs/charts/chart-types/html5-spline-chart/" target="_blank" title="HTML5 &amp; JS Spline Charts ">https://canvasjs.com/docs/charts/chart-types/html5-spline-chart/</a></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {

  title:{
    text: "Voltage over time",
    horizontalAlign: "left"
  },
  axisX: {
    minimum: 0,
    maximum: 700,
    title: "minutes"
  },
  axisY: {
    minimum: 0,
    suffix: "V",
    gridThickness: 0,
  },
  legend: {
  	horizontalAlign: "right",
    verticalAlign: "center" 
  },
  data: [
    {        
      type: "spline",
      showInLegend: true,
      color: "blue",
      legendText: "Volts @5ohm",
      dataPoints: [
        { x: 0, y: 4 },
        { x: 50, y: 2.8 },
        { x: 100, y: 2.5 },
        { x: 120, y: 2.3 },
        { x: 155, y: 1.6 },
        { x: 160, y: 1.3 },
        { x: 170, y: 1 },
        { x: 175, y: 0.4 }
        
      ]
    },
    {        
      type: "line",
      lineThickness: 1,
      color: "rgba(0,0,250,0.2)",
      showInLegend: true,
      legendText: "Trend for Volts @5ohm",
      markerType: "none",
      dataPoints: [
        { x: 0, y: 4 },
        { x: 200, y: 0  },
      ]
    },
    {        
      type: "spline",
      showInLegend: true,
      color: "red",
      legendText: "Volts @10ohm",
      dataPoints: [
        { x: 0, y: 3.6 },
        { x: 200, y: 3 },
        { x: 300, y: 2.2 },
        { x: 400, y: 0.5 },
      ]
    },
    {        
      type: "line",
      lineThickness: 1,
      showInLegend: true,
      color: "rgba(250,0,0,0.4)",
      legendText: "Trend for Volts @10ohm",
      markerType: "none",
      dataPoints: [
        { x: 0, y: 3.6 },
        { x: 600, y: 0  },
      ]
    },
        {        
      type: "spline",
      showInLegend: true,
      color: "rgba(0, 202, 0)",
      legendText: "Volts @15ohm",
      dataPoints: [
        { x: 0, y: 4.2 },
        { x: 400, y: 3.5 },
        { x: 500, y: 2.5 },
        { x: 550, y: 1 },
      ]
    },
    {        
      type: "line",
      lineThickness: 1,
      showInLegend: true,
      color: "rgba(0, 202, 0, 0.4)",
      legendText: "Trend for Volts @15ohm",
      markerType:...