Heatmap

author(s): Torstein Hønsi

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/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Heatmap showing employee data per weekday. Heatmaps are commonly used to
        visualize hot spots within data sets, and to show patterns or correlations.
        Due to their compact nature, they are often used with large sets of data.
    </p>
</figure>

CSS

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
    background: var(--highcharts-background-color);
    color: var(--highcharts-neutral-color-100);
}

.highcharts-figure,
.highcharts-data-table table {
    min-width: 360px;
    max-width: 800px;
    margin: 1em auto;
}

/* Custom CSS for the color axis ticks and marker */
.highcharts-coloraxis .highcharts-tick {
    stroke-linecap: round;
    translate: -6px 0;
    filter:
        drop-shadow(0 0 1px rgba(0, 0, 0, 0.1))
        drop-shadow(0 1px 1px rgba(0, 0, 0, 0.09))
        drop-shadow(0 3px 2px rgba(0, 0, 0, 0.05))
        drop-shadow(0 6px 2px rgba(0, 0, 0, 0.01));
    transition: opacity 0.3s ease;
}

/* When the heatmap is hovered, hide the ticks */
.highcharts-root:has(.highcharts-tracker:hover) .highcharts-tick {
    opacity: 0;
}

.highcharts-coloraxis-marker {
    filter:
        drop-shadow(0 0 1px rgba(0, 0, 0, 0.1))
        drop-shadow(0 1px 1px rgba(0, 0, 0, 0.09))
        drop-shadow(0 3px 2px rgba(0, 0, 0, 0.05))
        drop-shadow(0 6px 2px rgba(0, 0, 0, 0.01));
}

.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;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid var(--highcharts-neutral-color-10, #e6e6e6);
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: var(--highcharts-neutral-color-60, #666);
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table...

JavaScript

// Substring template helper for the responsive labels
Highcharts.Templating.helpers.substr = (s, from, length) =>
    s.substr(from, length);

// Create the chart
Highcharts.chart('container', {

    chart: {
        type: 'heatmap',
        plotBorderColor: '#0443E1',
        plotBorderWidth: 2,
        plotBorderRadius: 5,
        marginBottom: 25
    },

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

    subtitle: {
        text: 'Sales per employee per weekday',
        align: 'left'
    },

    xAxis: {
        categories: [
            'Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas',
            'Maria', 'Leon', 'Anna', 'Tim', 'Laura'
        ],
        opposite: true,
        labels: {
            autoRotation: [0, -90],
            style: {
                fontSize: '0.65em'
            }
        },
        lineWidth: 1,
        lineColor: '#0443E1'
    },

    yAxis: {
        categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
        title: null,
        reversed: true,
        labels: {
            rotation: -90,
            style: {
                fontSize: '0.65em'
            }
        }
    },

    accessibility: {
        point: {
            descriptionFormat: '{(add index 1)}. ' +
                '{series.xAxis.categories.(x)} sales ' +
                '{series.yAxis.categories.(y)}, {value}.'
        }
    },

    colorAxis: {
        min: -4,
        max: 154,
        startOnTick: false,
        endOnTick: false,
        tickPixelInterval: 50,
        minColor: '#0443E111',
        maxColor: '#0443E1',
        // Dots for ticks, extended also by custom CSS
        tickColor: '#ffffff',
        tickLength: 0.1,
        tickWidth: 6,
        gridLineWidth: 0,
        marker: {
            symbol: 'circle',
            color: 'transparent',
            lineColor: '#fff',
            lineWidth: 3
        }
    },

    legend: {
        align: 'right',
        layout: 'vertical',
       ...