highcharts / highcharts-react

The official Highcharts supported wrapper for React
Other
1.03k stars 108 forks source link

Server side rendering of React components #468

Open lars-jpeg opened 2 months ago

lars-jpeg commented 2 months ago

I'm trying to render Highcharts with ReactDOM.renderToString(<InsertHighchartsReactComponent>), but it does not render anything. I read that this is because Highcharts relies on the global window variable which does not exist outside of browsers. I need to render report PDFs and having the full flexibility of React would be awesome. Now I cant come up with any other possibility than sending the chart options to the node highcharts-export-server and then placing the resulting images in their correct spots in the react tree as images, followed by ReactDOM.renderToString and then making a PDF out of it.

There are other charting libraries, such as Recharts, that can be rendered server-side with renderToString.

Is it on the roadmap to detach Highcharts the global window variable?

User voice suggestion: https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api/suggestions/48286727-server-side-rendering-of-react-components

ppotaczek commented 2 months ago

Hi @lars-jpeg,

Thank you for contacting us and for you suggestion!

You are right, Highcharts can be run only in a browser and using the export server is the correct approach in your case. However, similar to the export-server, you can think about simulating your own browser environment, for example by using puppeteer and mounting react components there.

There are no plans in the roadmap to natively support other than browser environments.

Roadmap: https://www.highcharts.com/roadmap/

Docs: https://www.highcharts.com/docs/getting-started/frequently-asked-questions#can-i-use-highcharts-with-a-server https://www.highcharts.com/docs/export-module/render-charts-serverside

Best regards!