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,
  theme: "light2",
  title:{
    text: "Last 100 Balance Reporting"
  },
  axisY:{
    minimum: 34.5,
    maximum: 41,
    interval: 0.5,
  },
  toolTip: {
    contentFormatter: function (e) {
      var content = " ";
      for (var i = 0; i < e.entries.length; i++) {
        content += CanvasJS.formatDate(e.entries[i].dataPoint.extraContent, "DD MMM YYYY: hh:mm TT") + " : " + "<strong>" + e.entries[i].dataPoint.y + "</strong>"
        content += "<br/>";
      }
      return content;
    }
  },
  data: [{        
    type: "line",
    indexLabelFontSize: 16,
    color: "#F08080",
    dataPoints: [
      { y: 35.427, extraContent: new Date(2021, 10, 01, 13, 35)},
      { y: 35.447, extraContent: new Date(2021, 10, 01, 14, 35)},
      { y: 35.467, extraContent: new Date(2021, 10, 01, 15, 35)},
      { y: 35.487, extraContent: new Date(2021, 10, 01, 16, 35)},
      { y: 35.507, extraContent: new Date(2021, 10, 01, 17, 35)},
      { y: 35.527, extraContent: new Date(2021, 10, 01, 18, 35)},
      { y: 35.547, extraContent: new Date(2021, 10, 01, 19, 35)},
      { y: 35.567, extraContent: new Date(2021, 10, 01, 20, 35)},
      { y: 35.587, extraContent: new Date(2021, 10, 01, 21, 35)},
      { y: 35.627, extraContent: new Date(2021, 10, 01, 22, 35)},
    ]
  }]
});
chart.render();