Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

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

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

JavaScript

var bubbleProto = Highcharts.seriesTypes.bubble.prototype;

bubbleProto.axisTypes = ['xAxis', 'yAxis', 'colorAxis'];
bubbleProto.optionalAxis = 'colorAxis';
bubbleProto.colorKey = 'colorValue';
bubbleProto.pointArrayMap = ['y', 'z', 'colorValue'];
bubbleProto.parallelArrays = ['x', 'y', 'z', 'colorValue'];

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

  console.log(this)

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


Highcharts.chart('container', {

  chart: {
    type: 'bubble',
    plotBorderWidth: 1,
    zoomType: 'xy'
  },

  title: {
    text: 'Highcharts bubbles with radial gradient fill'
  },

  colorAxis: {
    minColor: '#c6e48b',
    maxColor: '#196127',
    min: 0,
    max: 10
  },

  xAxis: {
    gridLineWidth: 1
  },

  yAxis: {
    startOnTick: false,
    endOnTick: false
  },

  series: [{
    //keys: ['x', 'y', 'radius', 'colorValue'],
    data: [
      [9, 81, 63, 3],
      [98, 5, 89, 4],
      [51, 50, 73, 2],
      [41, 22, 14, 1],
      [58, 24, 20, 5],
      [78, 137, 4, 1],
      [55, 56, 53, 1],
      [18, 45, 70, 3],
      [42, 44, 28, 5],
      [3, 52, 59, 6],
      [31, 18, 97, 1],
      [79, 91, 63, 3],
      [93, 23, 23, 2],
      [44, 83, 22, 2]
    ]
  }, {
    //keys: ['x', 'y', 'value', 'colorValue'],
    marker: {
    	symbol: 'triangle'
    },
    data: [
      [42, 38, 20, 1],
      [6, 18, 1, 6],
      [1, 93, 55, 2],
      [57, 2, 90, 3],
      [80, 76, 22, 2],
      [11, 74, 96, 1],
      [88, 56, 10, 5],
      [30, 47, 49, 7],
      [57, 62, 98, 2],
      [4, 16, 16, 9],
      [46, 10, 11, 3],
      [22, 87, 89, 2],
      [57, 91, 82, 1],
      [45, 15, 98, 5]
    ],
  }]

});