Temperature heatmap

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
      This demo shows a temperature heatmap in Highcharts Maps. Heatmaps are included in Highcharts Maps, so the separate Heatmap module does not need to be loaded.
    </p>
</figure>

<pre id="csv">Date, Time,...

CSS

body {
    background: var(--highcharts-background-color);
    color: var(--highcharts-neutral-color-100);
}

#container {
    height: 450px;
}

.highcharts-figure {
    margin: 0 auto;
    min-width: 310px;
    max-width: 450px;
    height: 600px;
}

.highcharts-description {
    background: light-dark(#f2f6f2, #323232);
    border-radius: 0 4px 4px 0;
    border-left: 2px solid light-dark(#1d6aff, #fff);
    font-size: 0.8rem;
    font-style: italic;
    padding: 8px 16px;
    margin: 2em 10px 1em;
}

pre#csv {
    display: none;
}

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'heatmap',
        inverted: true
    },

    accessibility: {
        description: 'We see how temperatures are usually warmer during the ' +
            'day, especially from around 9am to 9pm. June 4th through 9th ' +
            'are also overall colder days compared to the rest. Overall the ' +
            'temperatures range from around 6 degrees C to around 27 ' +
            'degrees C.'
    },

    data: {
        csv: document.getElementById('csv').innerHTML
    },

    title: {
        text: 'Temperature heatmap',
        align: 'left'
    },

    subtitle: {
        text: 'Temperature variation by day and hour through June 2024',
        align: 'left'
    },

    xAxis: {
        tickPixelInterval: 50,
        min: '2024-06-01',
        max: '2024-06-30'
    },

    yAxis: {
        accessibility: {
            description: 'Hours in the day'
        },
        title: {
            text: null
        },
        labels: {
            format: '{value}:00'
        },
        lineWidth: 1,
        minPadding: 0,
        maxPadding: 0,
        startOnTick: false,
        endOnTick: false,
        tickPositions: [0, 6, 12, 18, 24],
        tickWidth: 1,
        min: 0,
        max: 23
    },

    colorAxis: {
        stops: [
            [0, '#3060cf'],
            [0.5, '#fffbbc'],
            [0.9, '#c4463a']
        ]
    },

    series: [{
        borderWidth: 0,
        colsize: 24 * 36e5, // one day
        tooltip: {
            headerFormat: 'Temperature<br/>',
            pointFormat: '{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} ' +
                '℃</b>'
        },
        accessibility: {
            enabled: false
        }
    }]
});