Only single series is shown

Question

I used an example from the demo on highcharts website, and the only modifications are:

• changed map to world.js
• Commented "allAreas" property

$(function () {


    // Instanciate the map
    $('#container').highcharts('Map', {
        chart: {
            spacingBottom: 20
        },
        title : {
            text : 'Europe time zones'
        },

        legend: {
            enabled: true
        },

        plotOptions: {
            map: {
                //allAreas: false,
                joinBy: ['iso-a2', 'code'],
                dataLabels: {
                    enabled: true,
                    color: 'white',
                    formatter: function () {
                        if (this.point.properties && this.point.properties.labelrank.toString() < 5) {
                            return this.point.properties['iso-a2'];
                        }
                    },
                    format: null,
                    style: {
                        fontWeight: 'bold'
                    }
                },
                mapData: Highcharts.maps['custom/world'],
                tooltip: {
                    headerFormat: '',
                    pointFormat: '{point.name}: <b>{series.name}</b>'
                }

            }
        },

        series : [{
            name: 'UTC',
            id: 'UTC',
            data: $.map(['IE', 'IS', 'GB', 'PT'], function (code) {
                return { code: code };
            })
        }, {
            name: 'UTC + 1',
            data: $.map(['NO', 'SE', 'DK', 'DE', 'NL', 'BE', 'LU', 'ES', 'FR', 'PL', 'CZ', 'AT', 'CH', 'LI', 'SK', 'HU',
                    'SI', 'IT', 'SM', 'HR', 'BA', 'YF', 'ME', 'AL', 'MK'], function (code) {
                return { code: code };
            })
        }, {
            name: 'UTC + 2',
            data: $.map(['FI', 'EE', 'LV', 'LT', 'BY', 'UA', 'MD', 'RO', 'BG', 'GR', 'TR', 'CY'], function (code) {
                return { code: code };
            })
        }, {
            name: 'UTC + 3',
            data: $.map(['RU'], function (code) {
                return { code: code };
            })
        }]
    });
});

Code in JSFiddle Why only single series is visible?

Answer 1

The line causing the issue is this: //allAreas: false.

This is the explanation and how to fix it (extract from the Highcharts support forum)

According to the API, setting allAreas to true will render all of the areas so also the one without value (as null value). Another option is the nullColor which by default is a shade of grey and sets the color to be used by null values.

Therefore if you set allAreas to true, then each series will draw all the areas and those with null values will be filled as grey (the nullColor). Because the later series have a higher z-index these are on top of the other series, resulting in a grey shape covering the shapes beneath it.

If you want to set allAreas to true but still see through the different series, you have to set the nullColor to transparent:

rgba(0,0,0,0)

Working JSFiddle here