JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://rawgithub.com/highslide-software/highcharts.com/master/js/highstock.src.js"></script>
<script src="http://rawgithub.com/highslide-software/highcharts.com/master/js/modules/map.src.js"></script>
<script src="http://rawgithub.com/highslide-software/highcharts.com/master/js/modules/heatmap.src.js"></script>

<script>
var data =...

JavaScript

$(function() {
    $('#container').highcharts('StockChart', {
        "chart": {
            "type": "heatmap"
        },
        "yAxis": {
            "title": {
                "text": "Zähler XYZ [kWh]"
            },
            "labels": {
                "format": "{value}:00"
            },
            "startOnTick": false,
            "endOnTick": false,
            "min": -1,
            "max": 24,
            "showFirstLabel": true,
            "showLastLabel": true,
            "tickPositions": [
                0,
                3,
                6,
                9,
                12,
                15,
                18,
                21,
                24
            ],
            "tickWidth": 1,
            "inverted": true,
            "offset": 40,
            "tickPosition": "inside"
        },
        "xAxis": {
            "type": "datetime",
            "gapGridLineWidth": 0,
            "events": {}
        },
        "colorAxis": {
            stops: [
                [0, "#FFFFFF"], 
                [0.2, "#0DA827"], 
                [1, "#CE1404"]
            ],
            "min": 0,
            "max": 2
        },
        plotOptions: {
            scatter: {
                nullColor: '#FF0AFF'
            }
        },
	    legend: {
	    	enabled: true,
	    	align: 'right',
	    	layout: 'vertical',
	    	verticalAlign: 'top',
	    	y: 30,
	    	shadow: false,
            itemMarginTop: 10,
            symbolHeight: 390,
            reversed: true // Will ignored.
	    },
        
        tooltip: {
            formatter: function (tooltip) {
                /**
                 * Build tooltip HTML string
                 */
                var point = this.point;
                var series = point.series;
                
                // build the header
                var s = [];
                
                s.push('<span style="color:' + series.color + '">' + series.name + '</span><br />');
               ...