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

Change color onHover

Hi guys,

I just want to know how to change the color of the county on Hover
That is the config of the mapOptions:

Code: Select all

    const [mapOptions, setMapOptions] = useState
        ({
            chart: {
                backgroundColor: null,
                map: [],
            },

            title: {
                text: ''
            },

            credits: {
                enabled: false
            },

            mapNavigation: {
                enabled: true,
                buttonOptions: {
                    verticalAlign: 'bottom'
                }
            },
            plotOptions: {
                series: {
                    events: {
                        click: function () {
                            if (al === 1) {
                                console.log(this)
                                setAdm0(this.Code);
                            }
                            else if (al === 2) {
                                setAdmCode(this.Code)
                                console.log(this)
                            }
                        },
                    }
                }
            },

            legend: {
                enabled: false
            },

            xAxis: {
                minRange: 0.1
            },

            yAxis: {
                minRange: 0.1
            },

            series: [{
                animation: false,
                data: _adminCodes,
                mapData: coordinatesFromApi,
                joinBy: ['Code', 'Code'],
                name: 'Random data',
                allowPointSelect: true,
                cursor: 'pointer',
                nullColor: '#7CB5EC',
                states: {
                    hover: {
                        color: "#AFE8FF",
                        borderColor: '#2A93FC',
                    },
                    select: {
                        color: '#AFE8FF'
                    }
                },
                dataLabels: {
                    enabled: true,
                    formatter: function () {
                        try {
                            return this.point.properties.Name;
                        }
                        catch (e) {
                            console.log(e);
                            //console.log(this);
                        }
                    }
                }
            }]
        });

Viewing the docs and other examples in the forum I think I did it well but the color doesn't change,

Many thanks
Fabrizio
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Change color onHover

Hello FabriPetrelli!

Thanks for contacting us with your question!

We can do it simpler, by using mouseOver.events.point and there update the color of a point. Check out the demo in the link below.

API references: https://api.highcharts.com/highmaps/ser ... .mouseOver

Demo: https://stackblitz.com/edit/react-xu42zz?file=index.js


Let me know if that was what you were looking for!
Best regards.
Dominik Chudy
Highcharts Developer
FabriPetrelli
Posts: 14
Joined: Thu Nov 12, 2020 9:39 am

Re: Change color onHover

I'm searching for something a little bit different, when I hover a county the color and border color change and when I move the pointer the color turn back to it's original, so I was thinking that:

Code: Select all

states: {
	hover: {
	color: 
	}
}

was better, am I wrong?
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Change color onHover

Oh, sure we can do it like that if this is the way you'd rather use.

Here is the demo: https://stackblitz.com/edit/react-yttag6?file=index.js

Feel free to ask any further questions!
Best regards!
Dominik Chudy
Highcharts Developer
FabriPetrelli
Posts: 14
Joined: Thu Nov 12, 2020 9:39 am

Re: Change color onHover

dominik.c wrote: Wed Nov 18, 2020 1:17 pm Oh, sure we can do it like that if this is the way you'd rather use.

Here is the demo: https://stackblitz.com/edit/react-yttag6?file=index.js

Feel free to ask any further questions!
Best regards!
Ok so I'll post my mapConfig 'cause it's very similar to yours but doesn't work, this snippet of code runs once the useEffect is triggered

Code: Select all

{
            chart: {
                backgroundColor: null,
                map: coordinatesFromApi,
            },
            title: { text: "" },
            credits: { enabled: false },
            mapNavigation: {
                enabled: true,
                buttonOptions: {
                    verticalAlign: 'bottom',
                }
            },
            legend: { enabled: false },
            xAxis: { minRange: 0.1 },
            yAxis: { minRange: 0.1 },
            series: [
                {
                    mapData: coordinatesFromApi,
                    data: adminsFromApi,
                    joinBy: ["Code", "Code"],
                    name: "Random Data",
                    borderWidth: 0.5,
                    shadow: false,
                    states: {
                        hover: {
                            color: "#de1024",
                            borderColor: "#2A93FC"
                        },
                        select: {
                            color: "#de1024"
                        }
                    }
                }
            ]
        });
The map is displayed but color doesn't change, am I doing something wrong?
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Change color onHover

Hi again!

I don't have access to your data so I can't reproduce the demo fully in an online editor. There might be some problem with your data, maybe with the way you insert it into your chart. I upload data to my chart in useEffect function using setData. That might be the key difference between our codes.

Best regards!
Dominik Chudy
Highcharts Developer
FabriPetrelli
Posts: 14
Joined: Thu Nov 12, 2020 9:39 am

Re: Change color onHover

Ok so I've recreated the issue on StackBlitz: https://stackblitz.com/edit/react-znwv2 ... src/App.js
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Change color onHover

Thanks for the demo. I know what's the reason for this problem. Your points have null values, so the state property does not work. You can check it by setting nullColor to red for example. You'll see that all points become red, so they are nulls. Fill your points with data, then it should work. ;-)

Demo: https://stackblitz.com/edit/react-vv9cb ... src/App.js

Best regards!
Dominik Chudy
Highcharts Developer
FabriPetrelli
Posts: 14
Joined: Thu Nov 12, 2020 9:39 am

Re: Change color onHover

dominik.c wrote: Fri Nov 20, 2020 8:27 am Thanks for the demo. I know what's the reason for this problem. Your points have null values, so the state property does not work. You can check it by setting nullColor to red for example. You'll see that all points become red, so they are nulls. Fill your points with data, then it should work. ;-)

Demo: https://stackblitz.com/edit/react-vv9cb ... src/App.js

Best regards!
I'm sorry but I don't really understand, what do you mean with fill your points with data, which property I have to fill?
I've console logged my

Code: Select all

series: [{
	data: 
}]
and it's full :|
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Change color onHover

I'm talking about this line:

Code: Select all

          // data: _adminCodes,

There's no data, so all points are colored from nullColor property. If you insert some data there, it'll probably work. :)

Best regards!
Dominik Chudy
Highcharts Developer

Return to “Highcharts Maps”