JSFiddle - React, Tailwind, and code Playground

by Luke Marlow

JavaScript

var ctx = document.getElementById("chart_area");
window.chart_area = new Chart(ctx, {
  type: 'matrix',
  data: {
    label: 'Count',
    datasets: [{
      "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
    }],
    backgroundColor(c) {
      const value = c.dataset.data[c.dataIndex].v;
      const alpha = (value - 5) / 10000;
      return Chart.helpers.color('green').alpha(alpha).darken(0.3).rgbString();
    },
    borderWidth: {
      top: 2,
      right: 2,
      bottom: 2,
      left: 2
    },
    width(c) {
      const a = c.chart.chartArea || {};
      const nt = c.chart.scales.x.ticks.length;
      return (a.right - a.left) / nt - 1;
    },
    height(c) {
      const a = c.chart.chartArea || {};
      const nt = c.chart.scales.y.ticks.length;

      return (a.bottom - a.top) / nt - 1;
    }
  },
  options: {
    "responsive": true,
    "showTooltips": true,
    "maintainAspectRatio": true,
    "plugins": {
      "legend": {
        "display": false
      },
      "tooltip": {
        "enabled": true,
        "displayColors": false,
        "callbacks": {
          "title": "function (tooltip) { return moment(tooltip[0].raw.x, 'YYYY-MM-DD').format('DD MMM YYYY'); }",
          "label": "function (tooltip) {  return tooltip.raw.y; }",
          "footer": "function (tooltip) { return tooltip[0].dataset.label + ': ' + tooltip[0].raw.v; }"
        }
      }
    },
    "tooltips": {
      "enabled": true,
    ...