Map bubble

author(s): Torstein Hønsi

by Black Label

HTML

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

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

JavaScript

Highcharts.getJSON('https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/world-population.json', function(data) {

  Highcharts.mapChart('container', {
    chart: {
      borderWidth: 1,
      map: 'custom/world'
    },

    title: {
      text: 'World population 2013 by country'
    },

    subtitle: {
      text: 'Demo of Highcharts map with bubbles'
    },

    legend: {
      enabled: true,
      bubbleLegend: {
        enabled: true,
        borderColor: '#000000',
        borderWidth: 3,
        color: '#8bbc21',
        connectorColor: '#000000'
      }
    },

    mapNavigation: {
      enabled: true,
      buttonOptions: {
        verticalAlign: 'bottom'
      }
    },
    colorAxis: {
      dataClasses: [{
        to: 50000,
        color: 'green',
        name: 'Weak'
      }, {
        from: 50000,
        to: 100000,
        color: '#81c784',
        name: 'Average'
      }, {
        from: 100000,
        to: 500000,
        color: '#43a047',
        name: 'Strong'
      }, {
        from: 500000,
        color: '#1b5e20',
        name: 'Stellar'
      }]
    },
    series: [{
      name: 'Countries',
      color: '#E0E0E0',
      enableMouseTracking: false
    }, {
      type: 'mapbubble',
      name: 'Population 2016',
      joinBy: ['iso-a3', 'code3'],
      data: data,
      minSize: 4,
      maxSize: '12%',
      tooltip: {
        pointFormat: '{point.properties.hc-a2}: {point.z} thousands'
      }
    }]
  });
});