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="chart-container" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chart-container", {
  zoomEnabled: true,
  exportEnabled: true,
  animationEnabled: true,
  axisX: {
    title: "chart updates every 5 secs",
    labelFontSize: 12,
    titleFontSize: 20,
    crosshair: {
      enabled: true,
      snapToDataPoint: true
    },
    labelAngle: -40,
    labelFormatter: function (e) {
      return CanvasJS.formatDate(e.value, "DD MMM HH:mm:ss");
    }
  },
  axisY: {
    crosshair: {
      enabled: true,
      snapToDataPoint: true,
      valueFormatString: "#,##0"
    }
  },
  toolTip: {
    shared: false,
    contentFormatter: function (e) {
      var content = " ";
      for (var i = 0; i < e.entries.length; i++) {
        content += CanvasJS.formatDate(e.entries[i].dataPoint.x, "DD/MM/YYYY HH:mm:ss") + "<br/>";
        content += " " + e.entries[i].dataSeries.name + " : " + "<strong>" + e.entries[i].dataPoint.y + "</strong>";
        content += "<br/>";
      }
      return content;
    }
  },
  legend: {
    //dockInsidePlotArea: true,
    cursor: "pointer",
    verticalAlign: "center",
    horizontalAlign : "left",  // "top" , "bottom"
    fontSize: 18,
    itemmouseover: function (e) {
      e.dataSeries.lineThickness = e.chart.data[e.dataSeriesIndex].lineThickness * 3;
      e.dataSeries.markerSize = e.chart.data[e.dataSeriesIndex].markerSize + 5;
      e.chart.render();
    },
    itemmouseout: function (e) {
      e.dataSeries.lineThickness = e.chart.data[e.dataSeriesIndex].lineThickness / 3;
      e.dataSeries.markerSize = e.chart.data[e.dataSeriesIndex].markerSize - 5;
      e.chart.render();
    },
    itemclick: function (e) {
      if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
        e.dataSeries.visible = false;
      } else {
        e.dataSeries.visible = true;
      }

      e.chart.render();
    }
  },
  data: [{type: "line",highlightEnabled: true,markerType:"circle",xValueType:"dateTime",xValueFormatString:"DD MMMMM YYYY...