Seeking Assistance for Dynamic Width and Height of Custom Tooltip using Highcharts React and Portals
Satyam7Jha opened this issue · comments
I am currently working on a project using Highcharts React and Portals to render a custom tooltip with dynamic width and height. I have an Advantage license.
CodeSandbox Demo: https://codesandbox.io/p/sandbox/highcharts-react-demo-forked-rxjqcv?file=%2Fdemo.jsx%3A62%2C65
Issues: Tooltip not rendering properly
Request:
I seek guidance on achieving dynamic width and height for the tooltip. Any recommendations or insights would be greatly appreciated.
Hi @Satyam7Jha,
Thank you for contacting us!
Using React Portals to render custom content in Highcharts tooltip is really tricky, because you need to predict dimensions tooltip's dimensions. I've simplified your logic, so I hope you will be able to adapt the below example to your needs.
Live demo: https://codesandbox.io/p/sandbox/highcharts-react-demo-forked-pp2lwk
As an alternative, you may consider creating your own tooltip from a scrach rather than relying on an existing one.
Best regards!
@ppotaczek How do we create our own tooltip in Highcharts
please do share if there is an example implantation of this custom tooltip
Hi @GowthamTG,
It's a very simple idea, you just need to place your chart and custom tooltip in a relative container and position the tooltip based on a hovered point.
Live example: https://codesandbox.io/p/sandbox/highcharts-react-demo-forked-99z6vf?file=%2Fdemo.jsx%3A13%2C9
Best regards!
Hii @ppotaczek
In this implementation :https://codesandbox.io/p/sandbox/highcharts-custom-tooltip-forked-w46pmz?file=%2Findex.tsx
custom tooltip injected via react portal into
Everything works great until I dynamicaly change size of tooltip content . Highchart tooltip simply does not change size to fit new content.
Case 1: here i first selcted 0th index toolitp which is smaller compare to 1st index toolitp.0th index tooltip is good but 1st index tooltip not able to resize.
Screen.Recording.2023-12-24.at.12.55.25.AM.mov
Case 2: here iam selecting 1th index toolitp which is bigger compare to 0st index toolitp. same issue tooltip stuck to larger size.
Screen.Recording.2023-12-24.at.12.55.53.AM.mov
Could you please help with this.Thanks
Here Custom tooltip injected via react portal into element created by tooltip's formetter() function.Everything works great until I dynamicaly change height of tooltip content . Highchart tooltip simply does not aligned after height is changed.
Expected behaviour
Tooltip should be aligned properly
Actual behaviour
it is only aligned when we hover second time on toolitp
Live demo with steps to reproduce
https://codesandbox.io/p/sandbox/highcharts-custom-tooltip-forked-5sv74k?file=%2Findex.tsx%3A28%2C39
Screen.Recording.2023-12-27.at.12.13.13.AM.mov
Affected browser(s)
All
Hello There!
As @ppotaczek mentioned, rendering JSX inside the chart elements is a complex topic, and it's not a Highcharts built-in feature. The main problem with dynamic content is that you must provide its proper dimensions to the rendering element, but in general, you can get them once you render an element to the DOM. I updated your example with a potential solution you can refer to: https://codesandbox.io/p/sandbox/highcharts-custom-tooltip-forked-8mq7x5?file=%2Findex.tsx.
The above fixes the described problem, but nevertheless has some performance drawbacks. Note that it's based on the Highcharts tooltip instance, which I find the trickiest solution to implement. I'd recommend basing your solution on the custom instance instead. An example is provided above by @ppotaczek, but also, please refer to this one: https://codesandbox.io/p/sandbox/highcharts-react-demo-fork-forked-ltr9dp?file=%2Fdemo.jsx.
Kind Regards!
Thanks