Heat map

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>

JavaScript

Highcharts.SVGRenderer.prototype.symbols.customSymbol = function (x, y, width, height, point) {
    // Your custom symbol drawing logic here
    // Return an SVG path string or SVG element
    const x_svg = ['M', x, y, 'L', x + width, y + height, 'M', x + width, y, 'L', x, y + height]
    const square_svg = ['M', x, y, 'L', x + width, y, 'L', x + width, y + height, 'L', x, y + height, 'L', x, y]
    let final_svg = []
    
		point.lineColor = 'red';
    final_svg.push(square_svg)
    final_svg.push(x_svg)
      
    return final_svg
};

// 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',
        marginTop: 40,
        marginBottom: 80,
        plotBorderWidth: 1
    },


    title: {
        text: 'Sales per employee per weekday',
        style: {
            fontSize: '1em'
        }
    },

    xAxis: {
        categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas',
            'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
    },

    yAxis: {
        categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
        title: null,
        reversed: true
    },


    colorAxis: {
        min: 0,
        minColor: '#FFFFFF',
        maxColor: Highcharts.getOptions().colors[0]
    },

    series: [{
        name: 'Sales per employee',
        borderWidth: 1,
        borderColor: 'black',
        data: [
        	[0, 0, 19],
          {
          	x: 0,
            y: 1,
            value: 10,
            marker: {
            	symbol: 'customSymbol',
              states: {
              	hover: {
                	enabled: true,
                  symbol: 'customSymbol'
                }
              }
            }
          },
          [1, 0, 92],
          [1, 1, 58]
        ],
        dataLabels: {
          enabled: true,
          color: '#000000'
        },
  ...