JSFiddle - React, Tailwind, and code Playground

by jlujan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-moment/1.0.0/chartjs-adapter-moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <style>
    canvas {
      height: 100% !important
    }

  </style>

  <div id="chart-container" class="box-shadow-bottom col-12 px-0 bg-white" style="flex: 0 0 30%; overflow: hidden;">
    <div style="overflow: hidden;">
      <canvas id="mychart"></canvas>
    </div>
  </div>

JavaScript

$(document).ready(function() {

  var chartDatasets = [];

  chartDatasets.push({
    "label": "Estimated kg DM Available",
    "data": [{
        "x": "2021-05-13T11:41:48.338Z",
        "y": 10944.050000000003,
        "paddockLabel": "36"
      },
      {
        "x": "2021-05-13T11:41:48.338Z",
        "y": 10944.050000000003,
        "paddockLabel": "36"
      },
      {
        "x": "2021-05-14T11:41:48.338Z",
        "y": 10729.350000000002,
        "paddockLabel": "25"
      },
      {
        "x": "2021-05-14T11:41:48.338Z",
        "y": 10729.350000000002,
        "paddockLabel": "25"
      },
      {
        "x": "2021-05-15T11:41:48.338Z",
        "y": 20066.4,
        "paddockLabel": "39"
      },
      {
        "x": "2021-05-15T11:41:48.338Z",
        "y": 19710,
        "paddockLabel": "28"
      },
      {
        "x": "2021-05-16T11:41:48.338Z",
        "y": 10080,
        "paddockLabel": "2"
      },
      {
        "x": "2021-05-16T11:41:48.338Z",
        "y": 10080,
        "paddockLabel": "2"
      },
      {
        "x": "2021-05-17T11:41:48.338Z",
        "y": 9861.599999999999,
        "paddockLabel": "13"
      },
      {
        "x": "2021-05-17T11:41:48.338Z",
        "y": 9861.599999999999,
        "paddockLabel": "13"
      },
      {
        "x": "2021-05-18T11:41:48.338Z",
        "y": 18227,
        "paddockLabel": "31"
      },
      {
        "x": "2021-05-18T11:41:48.338Z",
        "y": 10494.150000000001,
        "paddockLabel": "4"
      },
      {
        "x": "2021-05-19T11:41:48.338Z",
        "y": 10494.150000000001,
        "paddockLabel": "4"
      },
      {
        "x": "2021-05-19T11:41:48.338Z",
        "y": 15582,
        "paddockLabel": "22"
      },
      {
        "x": "2021-05-20T11:41:48.338Z",
        "y": 15215.4,
        "paddockLabel": "32"
      },
      {
        "x": "2021-05-20T11:41:48.338Z",
        "y": 16124,
        "paddockLabel": "24"
      },
      {
        "x": "2021-05-21T11:41:48.338Z",
   ...