Only single series is shown - highmaps

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