FabriPetrelli
Posts: 14
Joined: Thu Nov 12, 2020 9:39 am

Changing border size of a single element in a serie

Hi everyone,

I'm currently working on a React project where I need to highlight the region of the country that the user click, how can I achieve this?

Here's a live demo, I've managed how to build the map but I'm stuck at changing the size of the borders.

I've tried having 2 series, one with the base data for the map and the values and another with only the data for the region selected with bigger borders, it was working but the problem was that whenever I clean the selection the map doesn't update leaving with the region having wrong colors (nullColor instead of the valueColor)
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Changing border size of a single element in a serie

Hi,

Thanks for contacting us with your question!

You can use series.map.states.select option to achieve this.

Demo: https://jsfiddle.net/gh/get/library/pur ... intselect/
API: https://api.highcharts.com/highmaps/ser ... tes.select

Let me know if that was what you were looking for!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
FabriPetrelli
Posts: 14
Joined: Thu Nov 12, 2020 9:39 am

Re: Changing border size of a single element in a serie

michal.f wrote: Thu Sep 02, 2021 11:32 am Hi,

Thanks for contacting us with your question!

You can use series.map.states.select option to achieve this.

Demo: https://jsfiddle.net/gh/get/library/pur ... intselect/
API: https://api.highcharts.com/highmaps/ser ... tes.select

Let me know if that was what you were looking for!
Best regards!
Hi,

I'm trying to do this in React but I can't access the selectedLabel property because doesn't exist,
I'm using the HighchartsReact wrapper

Maybe the properties are slightly different?

Best,
Fabrizio
FabriPetrelli
Posts: 14
Joined: Thu Nov 12, 2020 9:39 am

Re: Changing border size of a single element in a serie

FabriPetrelli wrote: Thu Sep 02, 2021 1:09 pm
michal.f wrote: Thu Sep 02, 2021 11:32 am Hi,

Thanks for contacting us with your question!

You can use series.map.states.select option to achieve this.

Demo: https://jsfiddle.net/gh/get/library/pur ... intselect/
API: https://api.highcharts.com/highmaps/ser ... tes.select

Let me know if that was what you were looking for!
Best regards!
Hi,

I'm trying to do this in React but I can't access the selectedLabel property because doesn't exist,
I'm using the HighchartsReact wrapper

Maybe the properties are slightly different?

Best,
Fabrizio
Ok, I've just figured out how to do this but the problem is that the component takes all the properties such as borderColor and color but borderWidth doesn't work, any ideas?
FabriPetrelli
Posts: 14
Joined: Thu Nov 12, 2020 9:39 am

Re: Changing border size of a single element in a serie

Also, since I have 3 different maps inside the page is possible to highlight the selected series in all the 3 maps?
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Changing border size of a single element in a serie

Hi

This is a bug with borderWidth, since it is in the API it should work but for some reason, it doesn't take this property into account. The bug was reported on GitHub issues.

As for map synchronization, you can do it like this: https://jsfiddle.net/BlackLabel/scu3fq1L/

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Changing border size of a single element in a serie

Hello again,

There is a workaround for this bug by using a wrap: https://jsfiddle.net/BlackLabel/205afktu/

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Maps”