Answer to Stack Overflow question: https://stackoverflow.com/questions/51531190/how-to-custom-heatmap-cell-with-padding

author(s): Mike Zavarello

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>

<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {

  chart: {
    type: 'heatmap',
    marginTop: 40,
    marginBottom: 80,
    plotBorderWidth: 1,
    events: {
      render: function() {
        var chart = this,
          series = chart.series[0],
          points = series.points,
          pointPos,
          padding = series.options.pointPadding;

        if (series.rects) {
          Highcharts.each(series.rects, function(rect) {
            rect.destroy();
          });
        }

        series.rects = [];

        Highcharts.each(points, function(point) {
          pointPos = point.shapeArgs;

          series.rects.push(chart.renderer.rect(
              pointPos.x + chart.plotLeft - padding,
              pointPos.y + chart.plotTop - padding,
              pointPos.width + padding * 2,
              pointPos.height + padding * 2)
            .attr({
              fill: 'rgba(0,0,0,0)',
              stroke: 'black',
              'stroke-width': 1,
              zIndex: 3
            })
            .add());
        });
      }
    }
  },

  xAxis: {
    type: 'category'
  },

  yAxis: {
    type: 'category',
    title: null
  },

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

  series: [{
    pointPadding: 5,
    name: 'Sales per employee',
    data: [
      [0, 0, 10],
      [0, 1, 19],
      [0, 2, 8],
      [0, 3, 24],
      [0, 4, 67],
      [1, 0, 92],
      [1, 1, 58],
      [1, 2, 78],
      [1, 3, 117],
      [1, 4, 48],
      [2, 0, 35],
      [2, 1, 15],
      [2, 2, 123],
      [2, 3, 64],
      [2, 4, 52],
      [3, 0, 72],
      [3, 1, 132],
      [3, 2, 114],
      [3, 3, 19],
      [3, 4, 16],
      [4, 0, 38],
      [4, 1, 5],
      [4, 2, 8],
      [4, 3, 117],
      [4, 4, 115],
      [5, 0, 88],
      [5, 1, 32],
      [5, 2, 12],
      [5, 3, 6],
      [5, 4, 120],
      [6, 0, 13],
      [6, 1, 44],
      [6, 2, 88],
      [6, 3, 98],
      [6, 4, 96],
      [7, 0, 31],
      [7, 1, 1],
    ...