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

var chart = new CanvasJS.Chart("chartContainer", {
  axisX: {
    minimum: 0
  },
  axisY: {
    includeZero: false,
    gridThickness: 0
  },
  data: [
    {
      type: "spline",
      markerSize: 0,
      dataPoints: [
        { x: 0, y: 51 },
        { x: 5, y: 45, indexLabel: "F" },
        { x: 10, y: 60, indexLabel: "I" },
        { x: 15, y: 57 },
        { x: 20, y: 75, indexLabel: "J" }
      ]
    },
    {
      type: "line",
      markerSize: 0,
      dataPoints: [
        { x: 10, y: 60 },
        { x: 12, y: 130, indexLabel: "E" }
      ]
    },
    {
      type: "line",
      markerSize: 0,
      dataPoints: [
        { x: 0, y: 75, indexLabel: "G" },
        { x: 20, y: 75 },
        { x: 20, y: 0, indexLabel: "H" }
      ]
    }	
  ]
});

chart.render();