kiks1
Posts: 3
Joined: Tue Apr 06, 2021 11:57 am

Return react component from xAxis.labels.formatter with React portals

I'm trying to implement tooltips on label hover and used this sandbox as an example (React Portals demo from Highcharts docs) https://codesandbox.io/s/1o5y7r31k3.

But since all our components are written as functional components and using hooks a lot, first I've tried to rewrite that example from class to function. But for some reasons I can't even get these labels rendered and I have no idea why. Please see this sandbox (FunctionComponentChart.jsx):

https://codesandbox.io/s/highcharts-rea ... tChart.jsx

I've also left there ClassComponentChart.jsx file to see that it's quite the same, but working.

Thanks!
pawelys
Posts: 962
Joined: Wed Sep 02, 2020 10:37 am

Re: Return react component from xAxis.labels.formatter with React portals

Hi! Welcome to the official highcharts forum, and thanks for contacting us with your question! Check the following demo on how to create functional components in react, that should be used via react portals: https://codesandbox.io/s/highcharts-rea ... =/demo.jsx

Let me know if that works for you, and in case of any further questions feel free to contact us again! Kind regards,
Paweł Lysy
Highcharts Developer

Return to “Highcharts Usage”