JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<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>


<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>

JavaScript

let data = [
                {
                    "date": "2023-05-01",
                    "colorCode": "#FFE066",
                    "kwh": 168.9790363190025
                },
                {
                    "date": "2023-05-01",
                    "colorCode": "#CC0000",
                    "kwh": 235.91996571300922
                },
                {
                    "date": "2023-05-01",
                    "colorCode": "#CC0000",
                    "kwh": 218.56170827798545
                },
                {
                    "date": "2023-05-01",
                    "colorCode": "#E67300",
                    "kwh": 210.47536878201367
                },
                {
                    "date": "2023-05-01",
                    "colorCode": "#E67300",
                    "kwh": 202.75815748099984
                },
                {
                    "date": "2023-05-02",
                    "colorCode": "#ACBD5F",
                    "kwh": 78.52080913498997
                },
                {
                    "date": "2023-05-02",
                    "colorCode": "#ACBD5F",
                    "kwh": 71.6455621330142
                },
                {
                    "date": "2023-05-02",
                    "colorCode": "#FFE066",
                    "kwh": 157.08176892299952
                },
                {
                    "date": "2023-05-02",
                    "colorCode": "#CC0000",
                    "kwh": 213.01680551099776
                },
                {
                    "date": "2023-05-02",
                    "colorCode": "#CC0000",
                    "kwh": 230.08759201598167
                },
                {
                    "date": "2023-05-02",
                    "colorCode": "#E67300",
                    "kwh": 201.6210455890298
                },
                {
                    "date": "2023-05-03",
                    "colorCode": "#FFE066",
                    "kwh":...