JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new window.CanvasJS.Chart("chartContainer", {
  animationEnabled: true,
  axisX: {
    valueFormatString: "M/D/YY",
    labelFormatter: function(e) {
      return CanvasJS.formatDate(e.label, e.chart.axisX.valueFormatString);
    }
  },
  toolTip: {
    contentFormatter: function(e) {
      var content = " ";
      for (var i = 0; i < e.entries.length; i++) {
        content += CanvasJS.formatDate(e.entries[i].dataPoint.label, e.entries[i].xValueFormatString) + " " + e.entries[i].dataPoint.y;
        content += "<br/>";
      }
      return content;
    }
  },
  data: [{
    type: "area",
    fillOpacity: 0.1,
    xValueFormatString: "M/D/YY",
    dataPoints:  [
      { label: new Date("2022-07-02T07:00:00.000Z"), y: 80 },
      { label: new Date("2022-07-09T07:00:00.000Z"), y: 44 },
      { label: new Date("2022-07-16T07:00:00.000Z"), y: 77 } ,
      { label: new Date("2022-07-23T07:00:00.000Z"), y: 56 },
    ]
  }],
});
chart.render();