Seeking Assistance for Dynamic Width and Height of Custom Tooltip using Highcharts React and Portals about highcharts-react HOT 7 CLOSED

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!

from highcharts-react.

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!

from highcharts-react.

@ppotaczek How do we create our own tooltip in Highcharts
please do share if there is an example implantation of this custom tooltip

from highcharts-react.

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!

from highcharts-react.

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

from highcharts-react.

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

Affected browser(s)

All

from highcharts-react.

Thanks

from highcharts-react.