JSFiddle - React, Tailwind, and code Playground

by Luke Marlow

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js@next/dist/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-chart-matrix@next/dist/chartjs-chart-matrix.j"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-adapter-date-fns.bundle.js"></script>
<canvas id="chart-area" class="max-w-1/2"></canvas>

CSS

#chart-area {
  height: 300px;
  width: 600px;
  border: solid 1px red;
}

JavaScript

const ctx = document.getElementById('chart-area').getContext('2d');
window.myMatrix = new Chart(ctx, {
  type: 'matrix',
  data: {
    datasets: [{
      label: 'Steams',
      data: [{
          x: '2021-03-17',
          y: '00:00 - 02:59',
          v: 4046
        },
        {
          x: '2021-03-17',
          y: '03:00 - 05:59',
          v: 4120
        },
        {
          x: '2021-03-17',
          y: '06:00 - 08:59',
          v: 1903
        },
        {
          x: '2021-03-17',
          y: '09:00 - 11:59',
          v: 5122
        },
        {
          x: '2021-03-17',
          y: '12:00 - 14:59',
          v: 4584
        },
        {
          x: '2021-03-17',
          y: '15:00 - 17:59',
          v: 7611
        },
        {
          x: '2021-03-17',
          y: '18:00 - 20:59',
          v: 4439
        },
        {
          x: '2021-03-17',
          y: '21:00 - 23:59',
          v: 4178
        },

        {
          x: '2021-03-18',
          y: '00:00 - 02:59',
          v: 8916
        },
        {
          x: '2021-03-18',
          y: '03:00 - 05:59',
          v: 6777
        },
        {
          x: '2021-03-18',
          y: '06:00 - 08:59',
          v: 234
        },
        {
          x: '2021-03-18',
          y: '09:00 - 11:59',
          v: 1991
        },
        {
          x: '2021-03-18',
          y: '12:00 - 14:59',
          v: 7773
        },
        {
          x: '2021-03-18',
          y: '15:00 - 17:59',
          v: 943
        },
        {
          x: '2021-03-18',
          y: '18:00 - 20:59',
          v: 2569
        },
        {
          x: '2021-03-18',
          y: '21:00 - 23:59',
          v: 1639
        },

        {
          x: '2021-03-19',
          y: '00:00 - 02:59',
          v: 7072
        },
        {
          x: '2021-03-19',
          y: '03:00 - 05:59',
          v: 3233
        },
        {
          x: '2021-03-19',
          y: '06:00 - 08:59',
          v: 8729
       ...