JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

window.onload = function() {

  var chart = new CanvasJS.Chart("chartContainer", {
    height: 300,
    axisX: {
      gridThickness: 0,
      minimum: new Date("2013-06-24T21:00:00.000Z"),
      maximum: new Date("2024-09-14T21:00:00.000Z"),
      viewportMaximum: new Date("2024-09-15T21:00:00.000Z"),
      valueFormatString: "DD/MM/YY"
    },
    axisY: {
      gridThickness: 0,
      minimum: 0,
      maximum: 100
    },
    title: {
      text: "Simple Column Chart with Index Labels"
    },
    data: [{
        "name": "Clean",
        "type": "column",
        "indexLabel": "{y}",
        "unit": "%",
        "color": "#3BD7A7",
        "dataPoints": [{
            "x": new Date("2019-03-25T22:00:00.000Z"),
            "y": null
          },
          {
            "x": new Date("2024-02-13T22:00:00.000Z"),
            "y": 0.2,
            "indexLabel": "0",
            "toolTipContent": "{x}: 0",
            "highlightEnabled": false
          }
        ],
        "markerType": "circle",
        "showInLegend": false,
        "markerSize": 6,
        "legendText": "Clean",
        "xValueFormatString": "DD/MM/YY HH:mm",
        "toolTipContent": "Clean: {y} %<br>Time: {x}"
      },
      {
        "name": "Slime",
        "type": "column",
        "indexLabel": "{y}",
        "unit": "%",
        "color": "#9BF0E1",
        "dataPoints": [{
            "x": new Date("2017-10-26T21:00:00.000Z"),
            "y": 20
          },
          {
            "x": new Date("2018-05-31T22:00:00.000Z"),
            "y": 20
          }
        ],
        "markerType": "circle",
        "showInLegend": false,
        "markerSize": 6,
        "legendText": "Slime",
        "xValueFormatString": "DD/MM/YY HH:mm",
        "toolTipContent": "Slime: {y} %<br>Time: {x}"
      },
      {
        "name": "Algae",
        "type": "column",
        "indexLabel": "{y}",
        "unit": "%",
        "color": "#FFAC75",
        "dataPoints": [],
        "markerType": "circle",
    ...