Heat map

author(s): Torstein Hønsi

by fujigoko

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/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
</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;
}

JavaScript

Highcharts.chart('container', {

                        chart: {
                            type: 'heatmap',
                            marginTop: 40,
                            marginBottom: 80,
                            plotBorderWidth: 1,
                            height: 800
                        },

                        credits: {
                            enabled: false
                        },

                        xAxis: {
                            title: {
                                text: 'Sowing Date',
                                margin: 10
                            },
                            type: 'datetime',
                            min: Date.UTC(2023, 8, 1),
                            max: Date.UTC(2023, 8, 30),
                            labels: {
                                align: 'right',
                                format: '{value:%d.%m}',
                                rotation: 270,
                                margin: 10
                            }
                        },

                        yAxis: {
                            title: {
                                text: 'Spraying Date'
                            },
                            type: 'datetime',
                            min: Date.UTC(2023, 8, 1),
                            max: Date.UTC(2023, 8, 30),
                        },

                        colorAxis: {
                            stops: [
                                [0, '#FFFFFF'],
                                [0.185, '#FFFFFF'],
                                [0.1875, '#C6E0B4'],
                                [0.2475, '#C6E0B4'],
                                [0.25, '#A9D08E'],
                                [0.5, '#A9D08E'],
                                [0.5025, '#C6E0B4'],
                                [0.5625, '#C6E0B4'],
                                [0.565, '#FFFFFF']
                            ],
                     ...