SacrilegeTx
Posts: 3
Joined: Mon Jan 13, 2025 10:40 pm

Solid-gauge Chart Problem

I am trying to replicate this chart: https://jsfiddle.net/api/post/library/pure/ in React Project, after many attempts trying to import the module finally found the solution here: https://github.com/highcharts/highchart ... 2531518313 but the Chart is not showing as expected. I am getting this error message:
brave_bDtf96CtpW.png
brave_bDtf96CtpW.png (13.8 KiB) Viewed 1569 times
Project Repo: https://stackblitz.com/edit/vitejs-vite-qi4mywpo
Please help me to solve this issue.
kamil.k
Site Moderator
Posts: 464
Joined: Thu Oct 06, 2022 12:49 pm

Re: Solid-gauge Chart Problem

Hello SacrilegeTx,
thanks for reaching out!

The solution you provided strictly refers to the server components used natively by the new versions of Next.js. As mentioned, the HC modules use the browser API, which is unavailable on the server side, so this specific workaround is needed to enforce module loading on the client.

When it comes to the pure React environments, you should import the modules as stands here under the Upgrade notes section. It has changed since the HC v12, and there's no need to initialize the modules manually. Kindly refer to your updated demo.

Let me know how this works,
Kind Regards!
Kamil Kubik
Highcharts Developer
SacrilegeTx
Posts: 3
Joined: Mon Jan 13, 2025 10:40 pm

Re: Solid-gauge Chart Problem

kamil.k wrote: Wed Jan 15, 2025 9:31 am Hello SacrilegeTx,
thanks for reaching out!

The solution you provided strictly refers to the server components used natively by the new versions of Next.js. As mentioned, the HC modules use the browser API, which is unavailable on the server side, so this specific workaround is needed to enforce module loading on the client.

When it comes to the pure React environments, you should import the modules as stands here under the Upgrade notes section. It has changed since the HC v12, and there's no need to initialize the modules manually. Kindly refer to your updated demo.

Let me know how this works,
Kind Regards!
Thanks for the help, and also sorry for using the import incorrectly into React's project, but how can I do the replicate in NextJS's project?
live demo
I noticed the chart is so different from example:
brave_sCFQ645NcH.png
brave_sCFQ645NcH.png (6.4 KiB) Viewed 1474 times
Demo:
brave_o7TZVpWuNv.png
brave_o7TZVpWuNv.png (23.42 KiB) Viewed 1474 times
kamil.k
Site Moderator
Posts: 464
Joined: Thu Oct 06, 2022 12:49 pm

Re: Solid-gauge Chart Problem

I can see the visual differences come from different chart options. Kindly refer to the React implementation with the correct ones.

When it comes to Next.js, I can see there is an error when importing the solid-gauge module. I performed some tests and most of the other available modules seem to work fine. I think the main problem lies in the SSR run by Next.js. Despite the defined "use client" directive, Next.js still prerenders such components on the server side, which may be misleading at first sight. What is basically needed to overcome this, is a 100% client environment to make sure the browser API exists.

I've started an internal discussion to handle such an implementation correctly, and for now, I would like to refer you to this ESM workaround. Also, kindly refer to the related thread.

Let me know if there's anything else I can help you with,
Regards!
Kamil Kubik
Highcharts Developer
SacrilegeTx
Posts: 3
Joined: Mon Jan 13, 2025 10:40 pm

Re: Solid-gauge Chart Problem

Thank you so much, it works nice!

Return to “Highcharts Usage”