Highmaps - map not rendering - highcharts

Question

I've have had some problems with the highmaps library since a while back. I got reports from users that a map displaying statistics was not rendering sometimes.
When looking at the problem, I noticed that the map rendered quite inconsistently, sometimes perfect, but quite often - not at all.
When consulting the documentation at highcharts docs I realised that the example on jsfiddle suffers from the exact same problem. Sometimes the map simply does not render. I made a screen recording to show the problem.
This problem occurs in chrome and ff, I have not tried other browsers.
This is my code for the map, it's a part of a Angular app.
function createChart() {
chart = new Highcharts.Map({
chart: {
renderTo: 'mapContainer'
},
title: {
text: '',
},
credits: {
enabled: false
},
legend: {
layout: 'horizontal',
borderWidth: 0,
backgroundColor: 'rgba(255,255,255,0.85)',
floating: false,
verticalAlign: 'bottom',
horizontalAlign: 'center',
},
colorAxis: {
maxColor: '#7b9b00',
minColor: '#d7e241',
type: 'linear',
allowDecimals: false,
marker: {
color: 'black'
},
minPadding: 0.005
},
tooltip: {
formatter: function() {
return '<b>' + this.point.name + '</b><br>' +
'Asset Hits: ' + this.point.options.hits + '<br>' +
'Total Volume: ' + this.point.options.volume + '<br>';
},
style: {
fontSize: '12px',
fontFamily: 'Helvetica, Arial, sans-serif'
}
},
series: [{
mapData: Highcharts.maps['custom/world'],
name: 'countries',
showInLegend: false,
borderWidth: 0.2,
states: {
hover: {
borderWidth: 1
}
}
}]
});
}
scope.$on('geoData', function(event, data) {
var validData = function (data) {
var equal = _.isEqual(data, cachedData);
if (!equal && data.length > 1) {
return data;
}
};
if (validData) {
if (!chart) {
createChart();
}
updateSeries(data);
}
cachedData = data;
}, true);
function updateSeries(data) {
if (chart !== undefined) {
if (chart.series.length > 1) {
chart.series[1].remove();
}
}
chart.addSeries({
data: data,
title: 'Performance by Country',
mapData: Highcharts.maps['custom/world'],
joinBy: ['hc-key', 'countryiso'],
name: 'countries',
borderWidth: 0.2,
borderColor: 'black',
states: {
hover: {
borderWidth: 1,
color: '#7b9b00'
}
}
});
}
}
};
}
Video displaying the issue:
Link to video