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", {
  animationEnabled: true,
  zoomEnabled: true,
  theme: "light2",
  title:{
    text: 'Line Chart'
  },
  legend: {
    cursor: "pointer",
    itemclick: function (e) {
      if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
        e.dataSeries.visible = false;
      } else {
        e.dataSeries.visible = true;
      }
      e.chart.render();
    }
  },
  axisX: {
    title: 'Time (secs)',
    minimum: 2.8,
    maximum: 3.2
  },
  axisY:{
    title: 'Size (Bytes)',
    includeZero: false
  },

  data: [
    {
      type: "line",
      name: "144.0.0.2:49802",
      showInLegend: true,
      dataPoints: [
        { x: 3.001084, y: 235 },
      ]
    }, {
      type: "line",
      name: "144.0.0.2:49804",
      showInLegend: true,
      dataPoints: [
        { x: 2.991214, y: 234 },
      ]
    },
  ]

});
chart.render();