Highcharts Demo

author(s): Torstein Hønsi

by Shuaib Khan

HTML

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>

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

JavaScript

var bubbleProto = Highcharts.seriesTypes.mapbubble.prototype;

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

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

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

  let data = [{
      code3: "AFG",
      z: 28813,
      value: 10,
      code: 'AF'
    },
    {
      code3: "CHN",
      z: 1378665,
      value: 10,
      code: "CN"
    },
    {
      code3: "ITA",
      z: 60627,
      value: 3,
      code: "IT"
    },
    {
      code3: "IND",
      z: 1324171,
      value: 10,
      code: "IN"
    },
    {
      code3: "RUS",
      z: 144342,
      value: 4,
      code: "RU"
    },
    {
      code3: "USA",
      z: 323128,
      value: 6,
      code: "US"
    }
  ]


  let chart = Highcharts.mapChart('container', {

    chart: {
      map: 'custom/world'
    },

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

    },

    series: [{
      enableMouseTracking: false,
    }, {
      type: 'mapbubble',
      joinBy: ['iso-a3', 'code3', 'y'],
      data: data,
      minSize: 4,
      maxSize: '12%',
    }]
  });