Highcharts Demo

author(s): Torstein Hønsi

HTML

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

<div id="container" style="height: 400px"></div>

CSS

#container {
  height: 400px;
  min-width: 310px;
  max-width: 1400px;
  margin: 0 auto;
}

JavaScript

$(function() {

  var bubbleProto = Highcharts.seriesTypes.bubble.prototype;

  bubbleProto.axisTypes = ['xAxis', 'yAxis', 'colorAxis'];
  bubbleProto.optionalAxis = 'colorAxis';
  bubbleProto.colorKey = 'y';

  Highcharts.wrap(bubbleProto, 'translate', function(proceed) {
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));

    Highcharts.seriesTypes.heatmap.prototype.translateColors.call(this);
  });

  var chart = Highcharts.chart('container', {
    chart: {
      type: 'bubble'
    },
    
    series: [{
      data: [[1,4],[1,2],[4,3],[4, 4], [3, 5], [2, 6]],
      minSize: '20%'
    }],


    colorAxis: {
      minColor: '#c6e48b',
      maxColor: '#196127',
      min: 1,
      max: 6,
      gridLineWidth: 0,
      labels: {
        enabled: false
      }
    }
  });
});