Highcharts: multiple heatmaps with shared color ba

Question

In Highcharts, is it possible to have multiple heatmaps in the same chart? For example, I would like to obtain something similar to the picture below:

I know I can make a chart for each heatmap and then align all the charts with CSS, but the thing is that I want the heatmaps to have a shared color bar.

Answer 1

You could create single chart and transform its data. Live example below.

$(function() {

  $('#container').highcharts({

    chart: {
      type: 'heatmap',
      height: 1000,
      width: 1000
    },

    title: null,

    plotOptions: {
        series: {
            borderColor: 'white'
        }
    },

    colorAxis: {
      min: 0,
      max: 1,
      minColor: 'white',
      maxColor: Highcharts.getOptions().colors[5]
    },

    legend: {
      enabled: false
    },

    xAxis: {
        visible: false
    },

    yAxis: {
        visible: false
    },

    series: [{
      name: 'Sales per employee',
      borderWidth: 1,
      data: [...Array(43*43)].map((u, i) => {
        const x = Math.floor(i/43) // Get x value from 0 to 42
        const y = i%43 // Get y value from 0 to 42
        const zeroX = !((x+1) % 9) || !((x+2) % 9) // if point should not be displayed
        const zeroY = !((y+1) % 9) || !((y+2) % 9) // if point should not be displayed
        const v = zeroX || zeroY ? 0 : Math.random() // if point should not be displayed then set its value to 0
        return [x, y, v] // return x y an value of each point
      })
    }]

  });
});

https://jsfiddle.net/k4dvz5r2/show/