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
@borglin I've also used this gist as a way of being able to render complex React components inside a highcharts tooltip, and I think i was able to make a fairly decent solution for the height problem. I realized that the SVG container rendered by highcharts that was having a static height, and the solution I found was to just set
opacity: 0
on theoptions.tooltip.style
, and instead make a custom TooltipContainer component that wraps the content of the Tooltips. Hope this could help anyone with similar issues.BTW: Also noticed that the error that is thrown from
tooltip.refresh
function went away after upgrading to Highcharts 11. Here is an updated sandbox:https://codesandbox.io/s/highcharts-react-tooltip-forked-s6xyqc?file=/src/TooltipContainer.tsx