Map bubble

author(s): Torstein Hønsi

by Geo George

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/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/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.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/[email protected]/samples/data/world-population.json', function (data) {

var data=[
      {
         name:"India",
         z:10,
       
      },
            {
         name:"Chad",
         z:1,
       
      },
                  {
         name:"Mali",
         z:5,
       
      }]
var dataa=[      
            {
         name:"Kenya",
         z:10
       
      },
                  {
         name:"Canada",
         z:30
       
      }


]
    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: false
        },

        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },
        plotoptions:{
         
        },

        series: [{
            name: 'Countries',
          // color: '#E0E0E0',
            enableMouseTracking: false
        }, {
            type: 'mapbubble',
            name: 'Population 2016',
            joinBy: ['name', 'name'],
            data: data,
             minSize: 20,
            maxSize: 20,
 						point: {
                events: {
                    click: function () {
                       alert(this.name)
                    }
                }
            },
            
        },
        {
            type: 'mapbubble',
            name: 'Population 2016eeeeee',
            joinBy: ['name', 'name'],
            data: dataa,
            //color:'red',
             minSize: 40,
            maxSize: 40,
 						point: {
                events: {
                    click: function () {
                       alert(this.name)
                    }
                }
            },
            
       ...