ktstyle
Posts: 33
Joined: Tue May 05, 2020 11:48 pm

Hover effect triggered by data series?

Hello,

Jsfiddle link: https://jsfiddle.net/o51td2cr/13/

I'm attempting to have pin markers on my map. When a user hovers over the countries with pins there is a gray hover effect this is triggered. I am attempting to make the country have that same hover effect only when they hover over the pin mark and not the country.

So for example, if I hover over the pin marking labeled "Iceland" it will highlight the entire country Iceland, like how it does when you hover over the country.

I attempted to achieve this by adding

Code: Select all

states: {
      hover: {
        color: '#808080'
      }
    },


into the data: array but it did not happen. Is this something that will be possible?

Thanks
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Hover effect triggered by data series?

Hello ktstyle,

Thanks for contacting us with your question.

You can do something like this with mouseOver and mouseOut events set on pin markers.
Demo: https://jsfiddle.net/BlackLabel/s2czbnrq/
API reference:https://api.highcharts.com/highmaps/ser ... s.mouseOut,
https://api.highcharts.com/highmaps/ser ... .mouseOver

Let me know if that was what you were looking for!
Best regards!
Mateusz Bernacik
Highcharts Developer
ktstyle
Posts: 33
Joined: Tue May 05, 2020 11:48 pm

Re: Hover effect triggered by data series?

Hi mateusz.b,

Thank you for your response. This is exactly what I'm looking for but I would also like the tooltip effect to display the name of the country only if you hover over the pin mark. Currently, tooltip is set to false but if on true it actives the tooltip for the country hover and pin hover. How can I get it so it would only show the country name on pin hover?

Also could explain what the reference index is? Is there a reason why you set Norway to 1 and not 2? For example if I add another country to the list do I need a specific number? Is there any documentation I can read on this?

Thanks
Best regards!
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Hover effect triggered by data series?

Hi ktstyle,

Sorry for slightly longer response time.

Here is a demo with tooltip showing country name on pin hover:
https://jsfiddle.net/BlackLabel/7ftc492g/
I did it using tooltip.formatter callback function:
https://api.highcharts.com/highmaps/tooltip.formatter

Regarding your second question, reference index is my custon property which I added as a reference to a specific country. Mappoints (pins) are separate series and without these references to map series points I couldn't trigger events which belong to map series. So yes, if you add another country you have to add pin with appropriate reference index. There is no documentation for that because this is a custom behaviour coded specifically for your request and you can't do something like that purely from API options.

Let me know if you have any futher questions.
Best regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Maps”