lmanohara
Posts: 2
Joined: Sat Nov 23, 2019 3:04 pm

Highcharts React JS - Not Highlighting the Selected Country on the Map

Hi All,

We are trying to implement the sample map chart https://www.highcharts.com/demo/maps/rich-info using React JS wrapper. We need to highlight the selected country that the user clicked on a country in the map. However, the following states.select configuration is not working in the Highchart map version of React JS.

Code: Select all

series: [{
                data: data,
                mapData: mapData,
                joinBy: ['iso-a3', 'code3'],
                name: 'Current population',
                allowPointSelect: true,
                cursor: 'pointer',
                states: {
                    select: {
                        color: '#a4edba',
                        borderColor: 'black',
                        dashStyle: 'shortdot'
                    }
                },
                borderWidth: 0.5
            }]
Can anyone recommend a way to work the above configuration in React JS or an alternative way of implementing the same functionality?

Thanks,
Lahiru
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Highcharts React JS - Not Highlighting the Selected Country on the Map

Hi,
So you are familiar with the wrapper documentation, right? Here is an example where there is a map.

https://github.com/highcharts/highcharts-react#examples

The series itself is not enough for me to investigate your case, I need to see how you set up the chart.
Can you simplify the example and show it in the online code editor?

I'm waiting for news from you.
Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Maps”