jakeh
Posts: 2
Joined: Tue Nov 09, 2021 4:37 pm

Highlighted areas not showing

I'm trying to create a simple map showing areas highlighted, but it's not showing the areas highlighted.

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]
];
jakeh
Posts: 2
Joined: Tue Nov 09, 2021 4:37 pm

Re: Highlighted areas not showing

I've created a jsfiddle for this at https://jsfiddle.net/h8besv62/.
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Highlighted areas not showing

Hello jakeh,

Welcome to our forum and thanks for contacting us with your question!

There's a typo in iso type, should be 'iso-a3' instead of 'iso_a3' .

Demo
https://jsfiddle.net/BlackLabel/3hjuvnp6/

Let me know if you have any further questions,
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer

Return to “Highcharts Maps”