Difficult to use React components with Highcharts formatters.

[jon-a-nygaard]

I have received feedback from a user asking how they can render React components in a Highcharts formatter function.
This proved to be quite difficult and we should try to somehow make it more user friendly.

I made one example where I am rendering a component with a react router in xAxis.labels.formatter using a helper function named formatter: Gist
The solution was complicated by a bug in Highcharts.fireEvent, and that the Highcharts formatters expects a string in return.

One way I believe this can perhaps be simplified is that the Highcharts formatters can be modified to handle dom elements as return values.
Still this will not solve the full issue, as the Highcharts formatters will still not be able to handle a React component. So in my opinion there will likely be a need for some sort of helper as middleware.

[Anwardo]

Any update on this? Being able to render dom nodes inside formatters would make a huge difference. Right now it's really frustrating to properly add event handlers to elements inside a formatter function.

[ppotaczek]

Hello,

Unfortunately, there is currently no progress in this topic. As the autor of this issue rightly noticed, the implementation would be complicated and would require some changes in the Highcharts core.

However, I think that I can suggest a slightly different approach. React v16 provided portals:

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

which allow us to add React components for example to xAxis labels. Please check the following example:

Live demo: https://codesandbox.io/s/1o5y7r31k3
Docs: https://reactjs.org/docs/portals.html

Best regards!

[Anwardo]

Hi, thanks for your detailed response, provided examples and insights! I considered using Portals but didn't figure out how to actually bring them into the chart yet. Very interesting solution.

I managed to utilize renderToString while binding a listener to a generated id for my use case for now, but might look into using your provided solution at a later stage.

[jon-a-nygaard]

Related issue in highcharts repository highcharts/highcharts#7755

[ksdelacruz]

I want to +1 on this feature. Currently, I'm trying to add React Router Links on my heatmap labels in order to load more detailed charts though since strings are the only accepted returns for formatters, I can't get to make router links work. Mimicking links using the <a> tags on labels would make the page reload which is different from the intended SPA behavior.

[ppotaczek]

Hi @ksdelacruz, Did you try to use the solution with portals?

[ksdelacruz]

@ppotaczek I can't get to work the solution (or at least I can see how to incorporate it) on my development, because unlike the given example that access the ticks/label of x-Axis, I want to access the actual labels (points) of the series. Anyway, I just utilized the "onClick" event of the chart to save the point/label and just re-render a button with <Link> tag outside the heatmap.

[ppotaczek]

@ksdelacruz,

By portals you can add React components to all HTML chart's elements. Please check the example with data labels: https://codesandbox.io/s/highcharts-react-demo-v9dns

Best regards!

[ksdelacruz]

@ppotaczek Thank you very much for your help!

[stovmascript]

Don't know if this is any help, but we're currently using renderToStaticMarkup to enable using JSX in the formatting function:

import { renderToStaticMarkup } from 'react-dom/server'

// ...
  return (
    <HighchartsReact
      options={{
        tooltip: {
          formatter() {
            return renderToStaticMarkup(
              <span style={{ color: 'red' }}>
                {/* ... */}

[ksdelacruz]

@ppotaczek I would like to ask for additional help. I tried converting the implementation of your given solution into React Hooks but there's a problem and I tried looking for solution but can't find any. The portals do work but only on the first row of the heatmap. Hovering on the other rows would release an error

Uncaught TypeError: b.onMouseOver is not a function
at HTMLDivElement.e

Upon further checking/printing, it seems that the dataLabel attributes of points belonging to second row onward are missing.

P.S. Printing the points using chart.series[0].points logs 50 points but expanding the array on the console would show only 10 points.

[ppotaczek]

Hi @ksdelacruz,

Could you reproduce that issue in some online code editor? You can edit the live example that I provided previously.

[ksdelacruz]

@ppotaczek Here's the example of the code that I've been talking to. https://codesandbox.io/s/highcharts-react-demo-w4fix

Kindly refer to the console for further clarifications. Thank you very much.

[ppotaczek]

Hi @ksdelacruz, Thank you for the live demo!

The problem is that the chart re-renders after adding components from the portal, please check the order of functions in this example: https://codesandbox.io/s/highcharts-react-demo-tqzrr

You can prevent re-rendering, for example by setting allowChartUpdate option to false:

<HighchartsReact
    ...
    allowChartUpdate={false}
/>

Live example: https://codesandbox.io/s/highcharts-react-demo-nvve6

Best regards!