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

const mockDataPoints = (
   min,
   max,
   start,
   end,
   amount
 ) => {
   let data = [{
       x: new Date(
         start.getTime() +
         Math.random() * (end.getTime() - start.getTime())
       ),
       y: min
     },
     {
       x: new Date(
         start.getTime() +
         Math.random() * (end.getTime() - start.getTime())
       ),
       y: max
     }
   ];

   for (let count = 0; count < amount; count++) {
     const dateTime = new Date(
       start.getTime() + Math.random() * (end.getTime() - start.getTime())
     );
     const value = Math.round(Math.random() * (max - min) + min);
     data.push({
       x: dateTime,
       y: value
     });
   }

   data.sort((a, b) => a.x.getTime() - b.x.getTime());

   return data;
 };

 var chart = new CanvasJS.Chart("chartContainer", {
   axisX: {
     labelAngle: 0,
     labelMaxWidth: 65,
     labelWrap: true,
     labelFormatter: e => "10h 2019-09-01",
   },
   data: [{
     type: "line",
     dataPoints: mockDataPoints(
       1,
       100,
       new Date(2019, 9, 1),
       new Date(2019, 9, 2),
       5
     )
   }]
 });

 chart.render();