jahnvi25
Posts: 284
Joined: Thu Oct 04, 2012 12:16 pm

treemap level specific tooltip

can i show different tooltip information based on where the mouse pointer is ?

https://jsfiddle.net/zj35yv8c/7/

like in above example.. without being drilled down into level. if i put mouse over 'IBM' section.. it would show me 'Stock detailed info'.. since thats where the mouse pointer is ?

Thanks
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: treemap level specific tooltip

Hello,

You can get information from a parent about the location of his children from this.point.node.children [0] .pointValues and on this basis check if the cursor is on a given point and update the content of the tooltip. Unfortunately, it's a bit of a complex functionality and I can't spend that much time writing it from scratch, but if you have any problem with coding, feel free to ask any further questions!

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
jahnvi25
Posts: 284
Joined: Thu Oct 04, 2012 12:16 pm

Re: treemap level specific tooltip

i found out that if i use allowTraversingTree: false.. then tooltip would show up properly. so was thinking of using that approach and then implement click event on node to drilldown programmatically ? would that approach better ?
can you point me to the ' how to drilldown treemap' programmatically ?

Thanks
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: treemap level specific tooltip

Hi,

Theoretically it is possible, but setting allowTraversingTree to false will disable breadcrumbs functionality, proper zooming and other problems that would need to be solved. I would suggest displaying all point information in the parent's tooltip.

Feel free to ask any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
jahnvi25
Posts: 284
Joined: Thu Oct 04, 2012 12:16 pm

Re: treemap level specific tooltip

Thanks for info.. I am still reading API documentation in detail.. and trying to understand treemap data type. but i found that by using
allowTraversingTree: true,
interactByLeaf: true

it does show proper tooltip and where the mouse pointer is.. and i am able to use that for what i want..
is this coincidence ? can i use this option ? ( i do get IBM when mouse is over there instead of its parent)

Thanks
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: treemap level specific tooltip

Hello,

In fact, there is such an option. I did not know about this option before. The attached demo in the API even shows what you want to achieve.

From what I'm looking at and after testing, I think you can use it in your case.

I am also posting links for people who will also try to achieve the same effect and will be looking at this topic.
Demo: https://jsfiddle.net/gh/get/library/pur ... rsingtree/
API: https://api.highcharts.com/highcharts/s ... ractByLeaf

If you still have any questions, write to us!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”