Heat map + Shape + Size

Different sizes

by amrutaJgtp

HTML

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

<div id="container"></div>

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'heatmap',
    plotBorderWidth: 1
  },
  xAxis: {
    type: 'category'
  },
  yAxis: {
    type: 'category'
  },
  plotOptions: {
    series: {
      marker: {
        symbol: 'circle'
      }
    }
  },
  series: [{
    colsize: 0.25,
    rowsize: 0.25,
    data: [
      [0, 0, 10]
    ]
  },{
    colsize: 0.35,
    rowsize: 0.35,
    data: [
      [1, 0, 92]
    ]
  },{
    colsize: 0.15,
    rowsize: 0.15,
    data: [
      [2, 0, 35]
    ]
  }, {
    colsize: 0.3,
    rowsize: 0.3,
    data: [
      [0, 1, 19],
    ]
  }, {
    colsize: 0.5,
    rowsize: 0.5,
    data: [
      [1, 1, 58]
    ]
  }, {
    colsize: 0.9,
    rowsize: 0.9,
    data: [
      [2, 1, 15]
    ]
  }, {
    colsize: 1,
    rowsize: 1,
    data: [
      [0, 2, 8]
    ]
  },{
    colsize: 0.8,
    rowsize: 0.8,
    data: [
      [1, 2, 78]
    ]
  },{
    colsize: 0.51,
    rowsize: 0.51,
    data: [
      [2, 2, 123]
    ]
  }]
});