JSFiddle - React, Tailwind, and code Playground

by samur3

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/heatmap.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

CSS

#container {
    min-width: 300px;
    max-width: 1800px;
    height: 800px;
    margin: 1em auto;
}

JavaScript

$(function () {

    $('#container').highcharts({
        
        chart: {
            type: 'heatmap',
            marginTop: 40,
            marginBottom: 40
        },


        title: {
            text: 'Scan minutes per hour'
        },

        xAxis: {
            categories: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00',                 '09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00','24:00']
        },

        yAxis: {
            categories: ['1/10', '2/10', '3/10', '4/10', '5/10','6/10','7/10','8/10','9/10','10/10',
                        '11/10','12/10','13/10','14/10','15/10','16/10','17/10','18/10','19/10','20/10',
                        '21/10','22/10','23/10','24/10','25/10','26/10','27/10','28/10','29/10','30/10'],
            title: null,
            minRange : 0.1
        },

        colorAxis: {
            min: 0,
            minColor: '#FFFAF0',
                maxColor: '#0000FF'
        },

        legend: {
            align: 'right',
            layout: 'vertical',
            margin: 0,
            verticalAlign: 'top',
            y: 25,
            symbolHeight: 320
        },

        tooltip: {
            formatter: function () {
                return '<b>' + this.series.xAxis.categories[this.point.x] + '</b>  <br><b>' +
                    this.point.value + '</b> minutes <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
            }
        },

        series: [{
            name: 'Sales per employee',
            borderWidth: 1,
            data:...