reward72
Posts: 4
Joined: Wed Aug 10, 2011 6:10 pm

Treemap hover color

I can't seem to find how to change the hover color for treemaps. I'd like to show one next to an HighMap geographical map and have similar hover effects between the two. I tried plotOptions.series.states.hover.color, but that doesn't seems to be supported.

Thanks!
piotr.m
Posts: 1433
Joined: Mon Nov 18, 2019 8:15 am

Re: Treemap hover color

Hi,

Thank you for contacting us with your question!

To achieve this effect, it is necessary to edit the core function.

Live demo:
https://jsfiddle.net/BlackLabel/cz0b9g1d/

Docs reference:
https://www.highcharts.com/docs/extendi ... highcharts

Alternatively, you can try to edit the color of the point using the event mouseOver and mouseOut.

Live demo:
https://jsfiddle.net/BlackLabel/5nfe1mz6/

API reference:
https://api.highcharts.com/highcharts/s ... s.mouseOut

Let us know if you have any further questions.

Best Regards!
reward72
Posts: 4
Joined: Wed Aug 10, 2011 6:10 pm

Re: Treemap hover color

Awesome! Thank you much!
Armour y0
Posts: 2
Joined: Tue Mar 07, 2023 3:52 pm

Re: Treemap hover color

Hi there. I've implemented the mouseOver and MouseOut functions for my treemap, and while this works, there is now a considerable lag when I switch between levels. I suspect what is happening is that as the animation progresses from level 1 to level 2, the mouseOver function is pausing the animation when this.update is called. Can you think of a workaround?
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Treemap hover color

Hello,

Welcome to our forum and thanks for contacting us with your question!

Could you prepare some demo presenting your problem?

I'm waiting for your reply
Best regards!
Dawid Draguła
Highcharts Developer
Armour y0
Posts: 2
Joined: Tue Mar 07, 2023 3:52 pm

Re: Treemap hover color

Hi there!

I added mouseOut and mouseOver functions to the multi-level chart on y'alls website and the behavior is observable here:

https://jsfiddle.net/fkaoxwmL/1/

If you click a cell, and then move your cursor around as the animation switches from level 1 to level 2, there's a noticeable slowdown.
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Treemap hover color

Hi,

Thanks for the demo!

Instead of updating the points that cause a re-render (and you have a lot of points, so this can take quite a long time) you can update the graphics attributes as in the demo below.

Demo: https://jsfiddle.net/BlackLabel/msuL3jvt/

Let me know if that was what you were looking for!
Best regards!
Dawid Draguła
Highcharts Developer

Return to “Highcharts Usage”