JSFiddle - React, Tailwind, and code Playground

by aubza01

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
  <div id="container"></div>
  <p class="highcharts-description">
    Heatmap showing employee data per weekday. Heatmaps are commonly used to
    visualize hot spots within data sets, and to show patterns or correlations.
    Due to their compact nature, they are often used with large sets of data.
  </p>
</figure>

CSS

.highcharts-figure,
.highcharts-data-table table {
    min-width: 360px;
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

.highcharts-tooltip .series-name {
        font-size: 0.8em
    }
  .highcharts-tooltip .point-name {
        font-weight: bold;
        border-bottom: 1px solid silver;
    }
    .highcharts-tooltip .point-value {
        font-weight: bold;
    }

JavaScript

// Substring template helper for the responsive labels
Highcharts.Templating.helpers.substr = (s, from, length) =>
  s.substr(from, length);

// Create the chart
Highcharts.chart('container', {

  chart: {
    type: 'heatmap',
    height: 600
  },


  title: {
    text: 'Employee Planning',
    style: {
      fontSize: '1em'
    }
  },

  xAxis: {
    categories: ['Sep 2023', 'Oct 2023', 'Nov 2023', 'Dec 2023', 'Jan 2024', 'Feb 2024'],
    opposite: true,
    lineWidth: 0,
    labels: {
      style: {
        fontSize: '0.75em'
      }
    }
  },

  yAxis: {
    categories: ['Adrian de Villiers', 'Barry Atkins', 'Barry Linekar', 'Evelyn Nolte', 'Harry Adams', 'Harry Waczkow', 'Jane Branch', 'Joe Bloggs', 'Manager Dummy', 'Manny Sanchez', 'Mary Eksteen', 'Other Dummy', 'Peter Fraklin', 'Project Manager Dummy', 'Ravi Naidoo', 'Steven Rouchester', 'Tracey Marais', 'Total'],
    title: null,
    reversed: true,
    labels: {
      style: {
        fontSize: '0.75em'
      }
    }
  },

  colorAxis: {
    min: 0,
    max: 101,
    stops: [
            [0.1, '#E1F5FE'],
            [0.2, '#B3E5FC'],
            [0.4, '#81D4FA'],
            [0.6, '#4FC3F7'],
            [0.8, '#039BE5'],
            [1, '#01579B'],
        ]
  },

  legend: {
    symbolWidth: 250
  },

  tooltip: {
  useHTML: true, 
      
      headerFormat: '<table>',
		  pointFormat: 
 '<tr><td colspan="2" class="series-name">{series.yAxis.categories.(point.y)}</td></tr>' +
  '<tr><td colspan="2" class="point-name">{series.xAxis.categories.(point.x)}</td></tr>' +
      '<tr><td>Hours: </td><td class="point-value">{point.value}</td></tr>' +'<tr><td>Percentage to Capacity: </td><td class="point-value">{point.colorValue: .2f}%</td></tr>'  + 
                            '</table>'
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        format: '{point.value: .2f}',
        style: {
          textOutline: false,
          fontWeight: 'normal'
        }
      }
    }
  },
 ...