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
Have you ever arrived at a better solution for creating the tooltip container? Speaking of:
chart.tooltip.refresh.apply(chart.tooltip, [this.point]);
.In my case, I was attempting use a tooltip configured as
{ shared: true }
which means I'm not receivingthis.point
, but ratherthis.points
(every element in that array being a point of the series). Passing that, a single point from that array, or anything else seem to throw an error trying to render the tooltip.Alternatively, I've tried running the
.update()
method, that in that scenario first time hovering over the tooltip results in empty tooltip, and only moving to another point will update it to correct value.