ipolitique
Posts: 34
Joined: Sat Oct 25, 2014 12:03 am

Map with qualitative data

Hi,

How to do a simple map with qualitative data?
(all demos are with quantitative data)

map: 'countries/fr/fr-all'

Example:
https://www.france-politique.fr/electio ... GAUCHE.htm

Highcharts.mapChart('container', {
chart: {
map: 'countries/fr/fr-all',
spacingBottom: 20
},

title: {
text: 'POLITIQUE DES REGIONS'
},

legend: {
enabled: true
},

plotOptions: {
map: {
allAreas: false,
joinBy: ['iso-a2', 'code'],
dataLabels: {
enabled: true,
color: '#FFFFFF',
style: {
fontWeight: 'bold'
},
// Only show dataLabels for areas with high label rank
format: null,
formatter: function () {
if (this.point.properties && this.point.properties.labelrank.toString() < 5) {
return this.point.properties['iso-a2'];
}
}
},
tooltip: {
headerFormat: '',
pointFormat: '{point.name}: <b>{series.name}</b>'
}
}
},

series: [{
name: 'GAUCHE',
color: '#FF00FF',
data: ['fr-pac', 'fr-occ'],
})
}, {
name: 'CENTRE',
color: '#FFB233',
data: ['fr-cor', 'fr-bre', 'fr-pdl', 'fr-ges', 'fr-nor', 'fr-lre', 'fr-gf', 'fr-mq'],
})
}, {
name: 'DROITE',
color: '#3366FF',
data: ['fr-naq', 'fr-bfc', 'fr-cvl', 'fr-idf', 'fr-hdf', 'fr-may', 'fr-gua'],
})
}, {
name: 'EXTREME DROITE',
color: '#000000',
data: ['fr-ara'],
}]
}]
});
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Map with qualitative data

Hi,
Thanks for the message and demos!

What do you mean by talking quantitative data?

I tried to reproduce the demo to be as similar to your screenshot as possible, I edited the legend options.
If this is not what you are looking for, please describe exactly what you want to do :)

Live demo:
https://jsfiddle.net/BlackLabel/jhw1qb4v/

API References:
https://api.highcharts.com/highmaps/legend

I'm waiting for news from you.
Best regards.
Sebastian Hajdus
Highcharts Developer
ipolitique
Posts: 34
Joined: Sat Oct 25, 2014 12:03 am

Re: Map with qualitative data

Hi,
Thank you very much for your answer!

My first message was not clear, sorry...
(I wanted to delete it and rewrite, but how?)

My question si to color regions (not to cutomize legend) with qualitative data/categorized areas (like this example without Highcharts I want to use: https://www.france-politique.fr/electio ... 015-T1.htm)


series: [{
name: 'Extrême gauche',
color: '#8B0000',
data: ['fr-pac', 'fr-bfc', 'fr-cvl'],
})
}, {
name: 'Gauche',
color: '#FF00FF',
data: ['fr-occ', 'fr-naq'],
})
}, {
name: 'Centre',
color: '#FFB233',
data: ['fr-bre', 'fr-gua'],
})
}, {
name: 'Droite',
color: '#3366FF',
data: ['fr-pdl', 'fr-idf', 'fr-hdf', 'fr-ara', 'fr-lre', 'fr-may'],
})
}, {
name: 'Extrême droite',
color: '#993300',
data: ['fr-naq', 'fr-bfc', 'fr-cvl', 'fr-idf', 'fr-hdf', 'fr-may', 'fr-gua'],
})
}, {
name: 'Régionalistes',
color: '#2F4F4F',
data: ['fr-mq'],
})
}]

Best regards!
ipolitique
Posts: 34
Joined: Sat Oct 25, 2014 12:03 am

Re: Map with qualitative data

Hi,
Thank you very much for your answer!

My first message was not clear, sorry...
(I wanted to delete it and rewrite, but how?)

My question si to color regions (not to cutomize legend) with qualitative data/categorized areas (like this but not with regions https://www.france-politique.fr/cartogr ... t-2011.htm)


series: [{
name: 'Extrême gauche',
color: '#8B0000',
data: ['fr-pac', 'fr-bfc', 'fr-cvl'],
})
}, {
name: 'Gauche',
color: '#FF00FF',
data: ['fr-occ', 'fr-naq'],
})
}, {
name: 'Centre',
color: '#FFB233',
data: ['fr-bre', 'fr-gua'],
})
}, {
name: 'Droite',
color: '#3366FF',
data: ['fr-pdl', 'fr-idf', 'fr-hdf', 'fr-ara', 'fr-lre', 'fr-may'],
})
}, {
name: 'Extrême droite',
color: '#993300',
data: ['fr-naq', 'fr-bfc', 'fr-cvl', 'fr-idf', 'fr-hdf', 'fr-may', 'fr-gua'],
})
}, {
name: 'Régionalistes',
color: '#2F4F4F',
data: ['fr-mq'],
})
}]

Best regards!
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Map with qualitative data

Hi,
Thanks for the message.

Try to customization your map similar to this, as you can see in the example I can set color for regions in each series.
Live demo: https://jsfiddle.net/BlackLabel/vr5mg7kw/

API References:
https://api.highcharts.com/highmaps/ser ... data.color

Let me know how are you going with this.
Best regards.
Sebastian Hajdus
Highcharts Developer
ipolitique
Posts: 34
Joined: Sat Oct 25, 2014 12:03 am

Re: Map with qualitative data

Thanks again ! but I have already tried it... without success :(
https://jsfiddle.net/ldeboissieu/6t1wuLc3/
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Map with qualitative data

Hi again,

I managed to achieve something like this.
In some places hc-key is repeated, e.g. for 'fr-bfc' and then the region colors are overlap.

Demo:
https://jsfiddle.net/BlackLabel/0f3y9kjm/

API References:
https://api.highcharts.com/highmaps/plo ... map.joinBy

Regards.
Sebastian Hajdus
Highcharts Developer
ipolitique
Posts: 34
Joined: Sat Oct 25, 2014 12:03 am

Re: Map with qualitative data

Great! Many thanks!
https://jsfiddle.net/ldeboissieu/x0Lbe3h5/

Have a nice day!
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Map with qualitative data

You're welcome! :)
In case of any further questions, feel free to contact us again.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Maps”