This is an example of how to render React component for Highcharts tooltip using React portals. See Chart.tsx
and Tooltip.tsx
files below. Latest Highcharts version is required for the example to work correctly (9.0.0 at the time of writting).
Codesandbox: https://codesandbox.io/s/highcharts-react-tooltip-ut1uy
@bogdan-fortum, it seems that
highcharts-react-official
behaviour has changed with React 18. Initial ref it returns seems to be pointing to a not initialised chart, thus, the error. This can be fixed by changing condition withinuseEffect
inTooltip.tsx
fromchart
tochart?.options
.However, it also seems that React 18 has introduced some asynchrony in the way how tooltip is render, thus, I had to wrap
chart.tooptip.apply
andchart.tooltip.hide
intosetTimeout
.Here is a working version of your sandbox.