Search code examples
javascriptgraphchartshighchartshighmaps

How to overlay two kinds of world maps over each other on Highmaps

I am new to highmaps/highcharts and was trying to put a map application where I can show 2 kinds of data on the same map. One is in form of highlighted country (shown in red) and another is in form of bubbles (currently showing in black). The issue I am facing is though the first series data (red regions) are just the countries present in my variable data, the black bubble seems to be everywhere and not just countries in the variable data.

enter image description here

I have added the following highcharts scripts - 

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

And this is how my script looks like -

function populateChart (data) {

// Initiate the chart
chart = $('#container').highcharts('Map', {

    chart: {
        // Edit chart spacing
        spacingBottom: 100,
        spacingTop: 100

    },

    title: {
        text: null
    },

    mapNavigation: {
        enabled: false
    },

    legend: {
        enabled: false
    },

    tooltip: {
        formatter: function () {

            return this.point.name;
        },
        shared: false
    },

    series: [{
        type: 'map',
        data: data,
        mapData: Highcharts.maps['custom/world'],
        joinBy: 'hc-key',
        name: null,
        color: '#cb202d',
        states: {
            hover: {
                color: '#cb202d',
                style: { fontFamily: '\'Proxima Nova Extra Condensed\', sans-serif', fontSize: '10px' },
            }
        },
        dataLabels: {
            enabled: false,
            color: '#FFFFFF',
            style: { fontFamily: '\'Proxima Nova Extra Condensed\', sans-serif', fontSize: '17px' },
            format: '{point.value}'
        }
    },
    {
        type: 'mapbubble',
        name: null,
        mapData: Highcharts.maps['custom/world'],
        joinBy: 'hc-key',
        data: data,
        minSize: 4,
        maxSize: '8%',
        animation: true,
        color: '#000000'
    }]
});

};

I have researched a lot without much success. Would appreciate if someone can point me in the correct direction. Thanks in advance.

Solution

  • It seems that the data is shared between the two series and the series modify it internally. Best way to avoid it might be using copies of the data (one copy per series).

    series: [{
        name: 'Country',
        joinBy: 'hc-key',
        color :'red',
        data: data.slice(),
        dataLabels: {
            enabled: true,
            color: '#FFFFFF',
            formatter: function () {
                if (this.point.value) {
                    return this.point.name;
                }
            }
        }
    }, {
        type: 'mapbubble',
      data: data,
      joinBy: 'hc-key',
      minSize: 30,
      maxSize: 40,
      dataLabels: {
        enabled: true,
        format: '{point.name}'
      }
    }]

    example: http://jsfiddle.net/1hnqjvqb/1/