I'm basing my map on the demo at https://www.highcharts.com/demo/maps/all-areas-as-null
This is my js code, but I'm pretty stumped at this point. My suspicion is I'm doing something wrong with the 'keys' and 'joinBy', but I've tried multiple different variations with no luck.
Code: Select all
var cvf = [
['PLW', 1],
['MDV', 1],
['FJI', 1],
['WSM', 1],
['LKA', 1],
['PHL', 1],
['MNG', 1],
['VUT', 1],
['BTN', 1],
['PNG', 1],
['VNM', 1],
['TLS', 1],
['BGD', 1],
['KHM', 1],
['NPL', 1],
['AFG', 1],
['MHL', 1],
['BRB', 1],
['CRI', 1],
['LCA', 1],
['GRD', 1],
['DOM', 1],
['COL', 1],
['GTM', 1],
['HND', 1],
['HTI', 1],
['LBN', 1],
['TUN', 1],
['MAR', 1],
['SDN', 1],
['PSE', 1],
['YEM', 1],
['COM', 1],
['SSD', 1],
['GHA', 1],
['KEN', 1],
['SEN', 1],
['TZA', 1],
['ETH', 1],
['RWA', 1],
['BFA', 1],
['GMB', 1],
['NER', 1],
['COD', 1],
['MDG', 1],
['MWI', 1]
];
Highcharts.mapChart('fig1', {
chart: {
map: "custom/world",
height: 800
},
title: { text: "" },
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
series: [{
name: 'CVF',
data: cvf,
color: '#003C71',
keys: ['code', 'value'],
joinBy: ['iso_a3','code'],
events: {
show: function () {
console.log(this.chart.series[0].data);
}
},
allAreas: true,
dataLabels: {
enabled: true,
color: '#FFFFFF',
formatter: function () {
if (this.point.value) {
return this.point.name;
}
}
},
}],
tooltip: {
enabled: true
},
legend: {
enabled: true
}
});
var xvf = [
['TUV', 1],
['KIR', 1]
];