akhabrenko
Posts: 2
Joined: Thu Aug 14, 2014 2:48 pm

Different hover colors for map points

I have points filled by three different colors on the World map. I need to highlight each point by appropriate color in hover state. If the point is green, it should become light green. If another point is blue, it should become light blue etc.

In options I can specify only hover color for all points. There was a possibility to use 'lighter' color in previous versions of map plugin, but now it doesn't work. Is there a way to use different hover colors?

Thanks!
seba
Posts: 4415
Joined: Tue Jul 31, 2012 2:26 pm

Re: Different hover colors for map points

It looks like buggy option, because hover states parameters are not applied for bubbles. I reported it to our developers here: https://github.com/highslide-software/h ... ssues/3361
Sebastian Bochan
Highcharts Developer
akhabrenko
Posts: 2
Joined: Thu Aug 14, 2014 2:48 pm

Re: Different hover colors for map points

Thanks for quick response.
And what about simple map without bubbles? If I have a few series of different color, am I able to specify hover state for each serie separately?
Fusher
Posts: 7912
Joined: Mon Jan 30, 2012 10:16 am

Re: Different hover colors for map points

Of course, for each series you can set hover:

Code: Select all

series: [{
    data: ...,
    states: {
        hover: {
            ....
        }
    }
}, {
 ...
}]
Paweł Fus
Highcharts Developer
Kaśka
Posts: 1
Joined: Thu Mar 16, 2023 1:10 pm

Re: Different hover colors for map points

I pass one series of data, but I have dataClasses in map. Is it possible to set hover color per this data class?
jakub.s
Posts: 1093
Joined: Fri Dec 16, 2022 11:45 am

Re: Different hover colors for map points

Hi,

Thanks for the question!

Sure it is, but it requires adding some logic. You can update the point's color after series.point.events.mouseOver (Highcharts hover event). In this method you should check to which dataClass does the point belong. There are multiple ways to achieve this:
- check the color (is it the color of the first or the second dataClass?)
- check based on value (is value 24 in the first dataClass or the second?)
And probably a few more.

Here's a demo: https://jsfiddle.net/BlackLabel/1zusrtbo/

API:
- https://api.highcharts.com/highmaps/col ... sses.color
- https://api.highcharts.com/highmaps/ser ... er.enabled
- https://api.highcharts.com/highmaps/ser ... .mouseOver
- https://api.highcharts.com/highmaps/ser ... s.mouseOut
- https://api.highcharts.com/class-refere ... int#update

Let me know if you have any more questions.

Best regards,
Jakub
Jakub
Highcharts Developer

Return to “Highcharts Maps”