1

I want to use Highcharts Treemap in my React app. And I want to change the tooltip to be able to render React components there (JSX.Element, at least). The docs say

"A subset of HTML is supported. Unless useHTML is true, the HTML of the tooltip is parsed and converted to SVG, therefore this isn't a complete HTML renderer. The following HTML tags are supported: b, br, em, i, span, strong. Spans can be styled with a style attribute, but only text-related CSS, that is shared with SVG, is handled."

Do someone know of any workaround to render a little bit more advanced tooltips?

B. Grossman
  • 21
  • 1

1 Answers1

0

It is not possible to use JSX in Highcharts formatters, but there are several other solutions:

  • create a separate component for tooltip and position it relative to a chart container
  • create empty Highcharts tooltip and use React portals to render React component in it
  • use renderToString or some other method from ReactDOMServer to convert JSX to HTML

Please check this thread for more information and examples: https://github.com/highcharts/highcharts-react/issues/23

Docs: https://github.com/highcharts/highcharts-react#how-to-add-react-component-to-a-charts-element

ppotaczek
  • 36,341
  • 2
  • 14
  • 24
  • Thank you!I currently try following the solution with React portals. A small issue I encountered: In the examples I found in your resources, you (and others) use point.dataLabel as the second param to createPortal. From what I see now, we no longer have this attribute.. what replaced it? I don't find anything I can provide as dom element. Should I query the dom directly? (document.... etc.) @ppotaczek – B. Grossman Apr 18 '23 at 01:10
  • Hi @B. Grossman, You can still refer to a data-label by using: `dataLabel` point's property. Live example: http://jsfiddle.net/BlackLabel/fy09pa8w/ – ppotaczek Apr 18 '23 at 09:10
  • I see that even in this example, if you add in the end '.div' (so 'dataLabel.div'), you get undefined. unlike the previous examples.. And I still get this error in my project: Property 'dataLabel' does not exist on type 'Point'. @ppotaczek – B. Grossman Apr 18 '23 at 09:21
  • That's because you need to enable `useHTML` option. Demo: http://jsfiddle.net/BlackLabel/zo75batd/ API: https://api.highcharts.com/highcharts/series.line.dataLabels. Also, please try to use: `chart.series[0].points[0].dataLabels[0].div`, to fix the TS error. – ppotaczek Apr 18 '23 at 09:36