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
Small update: As I was trying to roll out this solution to all our charts, I hit a roadblock when I came to some gannt charts that were having
<ReactHighcharts immutable={true} ... />
. When the immutable flag is set to true, it crashes inside highcharts when the tooltip tries to dochart.update(..)
to set the formatter function. However, I cannot replicate this in the sandbox, but it's very reproducable with all the charts in my application. Not sure why it acts differently from the sandbox. If the chart is rendered as immutable it crashes. Is this something that you have experienced before?I started thinking about a solution that would not involve using chart.update, but rather set the formatter function on the chart options object at initialization, but then the rapid updating of the context in state causes the entire chart to rerender as well, so that would need to be solved. Is this a solution you have considered as well?