Highcharts v12 with NextJS #502

julioxavierr · 2024-12-03T13:46:16Z

I'm using Highcharts with NextJS and when trying to update to Highcharts v12, I get the following error:

web:build:  ✓ Compiled successfully
   Collecting page data  .TypeError: Cannot read properties of undefined (reading 'createEvent')
web:build:     at j (/project/node_modules/.pnpm/[email protected]/node_modules/highcharts/highcharts.js:9:2038)
web:build:     at setOptions (/project/node_modules/.pnpm/[email protected]/node_modules/highcharts/highcharts.js:9:16987)
web:build:     at Object.compose (/project/node_modules/.pnpm/[email protected]/node_modules/highcharts/highcharts-more.js:9:23390)

From my research, it seems that this issue might be caused by trying to instance a chart on the server-side, which didn't seem to happen before.

While looking at the README of the project, I noticed that the following section was updated with a comment to only init modules if the Highcharts version is below v12.

highcharts-react/README.md

Lines 423 to 436 in 11c276d

    
           ### How to add a module? 
        
           To add a module, import it like so: 
        
           ```jsx 
        
           import Highcharts from 'highcharts' 
        
           import highchartsGantt from "highcharts/modules/gantt"; // The Gantt module 
        
           import HighchartsReact from 'highcharts-react-official' 
        
           // Init the module (only for Highcharts v < 12) 
        
           if (typeof highchartsGantt === 'function') { 
        
             highchartsGantt(Highcharts); 
        
           } 
        
           ```

However, the NextJS section still says the module should be initiated:

highcharts-react/README.md

Lines 140 to 155 in 11c276d

    
           ### Highcharts with NextJS 
        
           Next.js executes code twice - on server-side and then client-side. First run is done in an environment that lacks `window` and causes Highcharts to be loaded, but not initialized. Easy fix is to place all modules inits in a `if` checking if Highcharts is an object or a function. It should be an object for modules initialization to work without any errors, so code like below is an easy fix: 
        
           ```jsx 
        
           import React from 'react' 
        
           import Highcharts from 'highcharts' 
        
           import HighchartsExporting from 'highcharts/modules/exporting' 
        
           import HighchartsReact from 'highcharts-react-official' 
        
           if (typeof Highcharts === 'object') { 
        
               HighchartsExporting(Highcharts) 
        
           } 
        
           ... 
        
           ```

Which approach should be followed for NextJS? Could the server-side instance attempt be caused by something else?

The text was updated successfully, but these errors were encountered:

julioxavierr · 2024-12-03T14:03:14Z

If I remove all the module inits, as the first piece of documentation says, it builds. However, it crashes when trying to render the chart:

Error: Highcharts error #17: www.highcharts.com/errors/17/?missingModuleFor=histogram
 - missingModuleFor: histogram
    at Object.eval (webpack-internal:///../../node_modules/.pnpm/[email protected]/node_modules/highcharts/highcharts.js:9:138)
    at j (webpack-internal:///../../node_modules/.pnpm/[email protected]/node_modules/highcharts/highcharts.js:9:2591)
    at T (webpack-internal:///../../node_modules/.pnpm/[email protected]/node_modules/highcharts/highcharts.js:9:61)
    at aR.initSeries (webpack-internal:///../../node_modules/.pnpm/[email protected]/node_modules/highcharts/highcharts.js:9:196458)
    at eval (webpack-internal:///../../node_modules/.pnpm/[email protected]/node_modules/highcharts/highcharts.js:9:212099)
    at Array.forEach (<anonymous>)
    at aR.firstRender (webpack-internal:///../../node_modules/.pnpm/[email protected]/node_modules/highcharts/highcharts.js:9:212077)
    at aR.eval (webpack-internal:///../../node_modules/.pnpm/[email protected]/node_modules/highcharts/highcharts.js:9:196375)
    at j (webpack-internal:///../../node_modules/.pnpm/[email protected]/node_modules/highcharts/highcharts.js:9:2591)
    at aR.init (webpack-internal:///../../node_modules/.pnpm/[email protected]/node_modules/highcharts/highcharts.js:9:195604)
    at new aR (webpack-internal:///../../node_modules/.pnpm/[email protected]/node_modules/highcharts/highcharts.js:9:195314)
    at Object.chart (webpack-internal:///../../node_modules/.pnpm/[email protected]/node_modules/highcharts/highcharts.js:9:195188)
    at e (webpack-internal:///../../node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/highcharts-react-official/dist/highcharts-react.min.js:1:2479)
    at eval (webpack-internal:///../../node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/highcharts-react-official/dist/highcharts-react.min.js:1:3009)
    at commitHookEffectListMount (webpack-internal:///../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:23184:26)
    at safelyCallCommitHookLayoutEffectListMount (webpack-internal:///../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:22898:5)
    at reappearLayoutEffectsOnFiber (webpack-internal:///../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:23554:13)
    at reappearLayoutEffects_complete (webpack-internal:///../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:24872:7)
    at reappearLayoutEffects_begin (webpack-internal:///../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:24860:7)
    at commitLayoutEffects_begin (webpack-internal:///../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:24683:11)
    at commitLayoutEffects_begin (webpack-internal:///../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:24690:11)
    at commitLayoutEffects (webpack-internal:///../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:24646:3)
    at commitRootImpl (webpack-internal:///../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:26857:5)
    at commitRoot (webpack-internal:///../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:26716:5)
    at finishConcurrentRender (webpack-internal:///../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:26015:9)
    at performConcurrentWorkOnRoot (webpack-internal:///../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:25843:7)
    at workLoop (webpack-internal:///../../node_modules/.pnpm/[email protected]/node_modules/scheduler/cjs/scheduler.development.js:266:34)
    at flushWork (webpack-internal:///../../node_modules/.pnpm/[email protected]/node_modules/scheduler/cjs/scheduler.development.js:239:14)
    at MessagePort.performWorkUntilDeadline (webpack-internal:///../../node_modules/.pnpm/[email protected]/node_modules/scheduler/cjs/scheduler.development.js:533:21)

KamilKubik · 2024-12-04T14:59:12Z

Hi julioxavierr, thanks for bringing this up!

From the Highcharts v12 you don't have to initialize the module - you should directly import it instead. Kindly refer to the demo. Also, you have to run Highcharts in the client environment, not the server side (it was not supported in the previous versions either).

I agree that the current documentation may not be clear on this. Therefore, let me know if there's still anything unclear, and I'll leave this thread open until the documentation is updated.

Kind Regards!

julioxavierr · 2024-12-04T18:31:18Z

@KamilKubik thanks for the quick response time. I'll investigate further and figure out if it's an issue with my setup.

I've also created a demo with pages router in case it's useful for anyone in the future.

KamilKubik · 2024-12-06T11:55:07Z

@julioxavierr thanks for sharing this example!

It may be worth mentioning the key difference between the pages and app routing approaches in Next.js (in terms of rendering Highcharts). When using the app routing approach (introduced in Next.js v13) the "use client" directive is needed to render the route in the client environment, whereas using the pages routing, the route is rendered on the client by default.

Regards!

Bugrabugra · 2024-12-10T09:40:31Z

@julioxavierr
Can you achieve to run the code on development and prod environments? In my case when using react 19 with next 15, I can run on dev but I can not build. Highcharts causes problem no matter what I do (importing modules raw, or with Module func) I will try your repos react and next versions.

Bugrabugra · 2024-12-10T09:56:53Z

no, I couldn't make it work in Next.js 15 or 14, with @julioxavierr 's demo versions or with latest version of Next.js. I have tried react-router@7 even. I am disabling SSR in every projects, there is no way it runs. I am importing map module like this

import "highcharts/modules/map";

or like

import HighchartsMap from "highcharts/modules/map"; HighchartsMap(Highcharts);

I have asked 50 questions to chatgpt as well, tried every suggestions. Even though it works on dev env, it doesn'T build the project, I get

TypeError: Cannot read properties of undefined (reading 'Axis')

error every time. Any help would be great, I got a project from my company with a 2 weeks deadline and I got stucked at the beginning.

Bugrabugra · 2024-12-10T10:56:02Z

For anyone having the same problem with Next + Highcharts 12, I have tried every solution on internet and with chatgpt. Only solution was downgrading my highcharts to version 11. I have spent like 4 hours on this. here are the things I have tried

"use client";

import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import HighchartsMap from "highcharts/modules/map";
import HighchartsAccessibility from "highcharts/modules/accessibility";
import { useEffect, useState } from "react";


if (typeof Highcharts === "object") {
  HighchartsMap(Highcharts);
  HighchartsAccessibility(Highcharts);
}

or


import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import "highcharts/modules/map";
import "highcharts/modules/accessibility";
import { useEffect, useState } from "react";

none of them worked. By "none of them worked", I mean they run on dev but you get error on build if your next.config.ts is output: "export" (exports only js, css and html, no ssr).

for anyone, this is my working (on dev and build) lib versions

"highcharts": "^11.2.0",
"highcharts-react-official": "^3.2.1",
"next": "^15.0.4",
"react": "^19.0.0",
"react-dom": "^19.0.0",

julioxavierr · 2024-12-10T12:12:31Z

Hey @Bugrabugra,

Have you tried isolating all your highcharts imports into a single component and loading it with next/dynamic?
That seems to have fixed the build error for me with highcharts v12.

KamilKubik · 2024-12-10T12:35:04Z

Hi Bugrabugra!

It seems the issue comes from referencing the web API in the node environment during the build. Using the dynamic imports should work as @julioxavierr mentioned, but also, I'd like to refer you to this workaround (to make sure the modules load in the client environment):

"use client";

import { useEffect, useState } from "react";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

const loadHighchartsModules = async (callback) => {
  Promise.all([
    import("highcharts/modules/map"),
    import("highcharts/modules/exporting"),
    import("highcharts/modules/accessibility"),
  ]).then(callback);
};

export default function Home() {
  const [options, setOptions] = useState(null);

  useEffect(() => {
    loadHighchartsModules(async () => {
      const topology = await fetch(
        "https://code.highcharts.com/mapdata/custom/world.topo.json"
      ).then((response) => response.json());

      setOptions({
        chart: {
          map: topology,
        },
        series: [
          {
            joinBy: ["iso-a3", "code"],
          },
        ],
      });
    });
  }, []);

  if (!options) {
    return <div>Loading...</div>;
  }

  return (
    <HighchartsReact
      highcharts={Highcharts}
      options={options}
      constructorType="mapChart"
    />
  );
}

Bugrabugra · 2024-12-10T13:46:32Z

Hey @Bugrabugra,

Have you tried loading isolating all your highcharts imports into a single component and loading it with next/dynamic? That seems to have fixed the build error for me with highcharts v12.

I have tried dynamic import for "highcharts/modules/map" module at the map component. I haven't tried the way you did, like importing all modules inside a component and calling it with dynamic.

Bugrabugra · 2024-12-10T13:57:21Z

Hi Bugrabugra!

It seems the issue comes from referencing the web API in the node environment during the build. Using the dynamic imports should work as @julioxavierr mentioned, but also, I'd like to refer you to this workaround (to make sure the modules load in the client environment):

"use client";

import { useEffect, useState } from "react";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

const loadHighchartsModules = async (callback) => {
  Promise.all([
    import("highcharts/modules/map"),
    import("highcharts/modules/exporting"),
    import("highcharts/modules/accessibility"),
  ]).then(callback);
};

export default function Home() {
  const [options, setOptions] = useState(null);

  useEffect(() => {
    loadHighchartsModules(async () => {
      const topology = await fetch(
        "https://code.highcharts.com/mapdata/custom/world.topo.json"
      ).then((response) => response.json());

      setOptions({
        chart: {
          map: topology,
        },
        series: [
          {
            joinBy: ["iso-a3", "code"],
          },
        ],
      });
    });
  }, []);

  if (!options) {
    return <div>Loading...</div>;
  }

  return (
    <HighchartsReact
      highcharts={Highcharts}
      options={options}
      constructorType="mapChart"
    />
  );
}

Thank you so much, I think this approach was the only thing I haven't tried! It worked at both environments, dev and build.

Thank you!

wesngu28 · 2024-12-17T21:11:30Z

Running into this issue on dev using the recommended method on the client

TypeError: e.chart.options.accessibility is undefined
    o accessibility.js:12
    o accessibility.js:12
    j highcharts.js:9
    j highcharts.js:9
    render highcharts.js:9
    redraw highcharts.js:9
    redraw highcharts.js:9
    redraw highcharts.js:9
    update highcharts.js:9
    d React
 

The above error occurred in the <Unknown> component. It was handled by the <ReactDevOverlay> error boundar
y.

Am i missing something obvious here? It works fine when I build.

KamilKubik · 2024-12-18T10:30:37Z

Hi @wesngu28, seems the accessibility module works fine with the newest HC version, demo.

Since the issue appears locally (dev), could you reproduce it? Feel free to overwrite the above demo.

Regards!

wesngu28 · 2024-12-18T15:51:54Z

Having troubles replicating it, I'll poke around and see

stovmascript · 2025-02-19T15:10:11Z

@KamilKubik We ran into an issue with the offline exporting module when using your async loading method. It tries to use some destructured ajax property from the core components of Highcharts. I didn't dig further into the details of why it's a problem.

Since we have Highcharts isolated in a single component, loading our wrapper component with next/dynamic as @julioxavierr mentioned solves it for us. There's also a nice bonus of the whole thing becoming and async loaded chunk.

pgeday · 2025-02-19T16:00:09Z

Hello All,
I was told by HC support to ask my question here if these solutions do not solve my problem. I have a next.js app where I have already applied the dynamic import of the extra modules and all the charts work fine, except one. The HeatMap works well in dev environment but it fails in production. The issue is not about unedefined modules but it cannot find a valueMin. The console.log source shows that there is a problem with the HC HeatMap code. The chart options go through into the HC container fine. For some reason the HeatMap fails only in production. I can start the production build and start it, but as soon as I click on the part of the application that has the HeatMap I get a user side error with the below error log.

I do not think the dynamic import issue causes this, but HC Advantage support suggested I ask it here.

Thanks for any advice.

Thanks,
Peter

Error log:

Chart options example:

const chartOptions = {
    chart: { type: "heatmap", marginTop: 40, marginBottom: 80, plotBorderWidth: 1 },
    title: { text: "Title information", style: { "fontSize": "1em" } },
    xAxis: { categories: ["S 1", "S 2"] },
    yAxis: { categories: ["T 1", "T 2"], title: null, reversed: true },
    accessibility: {
      point: {
        "descriptionFormat": "{(add index 1)}. {series.xAxis.categories.(x)} {series.yAxis.categories.(y)}, {value}."
      }
    },
    colorAxis: { minColor: "#00e272", maxColor: "#fa4b42" },
    legend: { align: "right", layout: "vertical", margin: 0, verticalAlign: "top", y: 25, symbolHeight: 280 },
    tooltip: { format: "<b>{point.value}</b> from <br><b>{series.yAxis.categories.(point.y)}</b> at<br><b>{series.xAxis.categories.(point.x)}</b>" },
    credits: { enabled: false },
    series: [
      {
        borderWidth: 1,
        data: [
          [0, 0, 904.75],
          [1, 0, 904.75],
          [0, 1, 904.75],
          [1, 1, 904.75]
        ],
        dataLabels: {
          enabled: false,
          color: "#000000"
        }
      }
    ],
    responsive: {
      rules: [
        {
          condition: { maxWidth: 500 },
          chartOptions: { yAxis: { labels: { format: "{substr value 0 1}" } } }
        }
      ]
    }
  };

Highcharts container:

import dynamic from 'next/dynamic';

const ChartComponent = dynamic(() => import('./HighChartsReactInternal'), { ssr: false, });

export default function HighChartsReactContainer({ options }) {
  console.log('Highcharts container: ', { options });
  return (
    <>
      {!!options.series && <ChartComponent options={options} />}
    </>
  )
}

HighchartsReactContainer:

import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'
import Sankey from 'highcharts/modules/sankey'
import OrganizationModule from 'highcharts/modules/organization'
import Exporting from 'highcharts/modules/exporting'
import Accessibility from 'highcharts/modules/accessibility'
import HighchartsMore from 'highcharts/highcharts-more';
import Histogram from 'highcharts/modules/histogram-bellcurve';
import Draggable from 'highcharts/modules/draggable-points';
import Networkgraph from 'highcharts/modules/networkgraph';
import HeatMap from 'highcharts/modules/heatmap';

if (typeof Highcharts === "object") {
  (typeof Sankey === 'function') && Sankey(Highcharts);
  (typeof OrganizationModule === 'function') && OrganizationModule(Highcharts);
  (typeof Exporting === 'function') && Exporting(Highcharts);
  (typeof Accessibility === 'function') && Accessibility(Highcharts);
  (typeof HighchartsMore === 'function') && HighchartsMore(Highcharts);
  (typeof Histogram === 'function') && Histogram(Highcharts);
  (typeof Draggable === 'function') && Draggable(Highcharts);
  (typeof Networkgraph === 'function') && Networkgraph(Highcharts);
  (typeof HeatMap === 'function') && HeatMap(Highcharts);
}

export default function HighChartsReactInternal({ options }) {
  return (
    <HighchartsReact highcharts={Highcharts} options={options} />)
}

KamilKubik · 2025-02-20T09:42:03Z

Hi pgeday!

Even though I cannot reproduce this specific issue, I've managed to run into similar (hopefully) ones. Here are my thoughts and recommendations:

Switching to ESM seems to fix the build errors. Kindly refer to the documentation for more details.
Next.js v15 leads me without errors, but switching to the lower version (I've tested with v13) throws me modules importing errors.
Regarding the above (but not specifically), I'd still recommend testing loading modules following this approach. By doing so, we should have 100% certainty that the modules are loaded client-side (without any unwanted server-side rendering caused by Next.js during the build).
You can try switching the modules importing order. Apart from general rules for a few of them, it may be helpful, as mentioned in this thread.
The major difference between the dev and prod environments comes from building the static pages. Depending on the Next.js version, it could be crucial to mark client components properly.

Also, note that from the Highcharts v12, you should import the modules directly instead of initializing them (see the Upgrade notes section) or the mentioned documentation.

Looking forward to your response,
Kind Regards!

pgeday · 2025-02-20T11:40:10Z

Hi @KamilKubik,
Thanks for your quick and detailed responses. I indeed use Next.js 13.0.5 and I do not have capacity to upgrade it to v15 now.

I tested what I understood from the links you provided. I also moved the various import up and down. I also tried to console log if there is a HeatMap and whether it is a function or an object. I get a detailed HeatMap object as if it was imported and in my console shows that the HeatMap is an object, not a function. However, if I change the
(typeof HeatMap === 'function') && HeatMap(Highcharts);
line to
(typeof HeatMap === 'object') && HeatMap(Highcharts);
then all the charts break and nothing shows up.

In my dynamic import I have ssr: false. The part of the app that has the charts only loads in after login and nothing is a static page.

Sorry, but what does it mean that you should import the modules directly instead of initializing them. I am importing all the modules per ES6. In the upgrade notes link you shared there is one mention of "import" at v5.0.0. Initialize has 1 mention at v7.1.3, unrelated.
Update on this, based on the code I got from support. Does the import instead of initialize mean to use the following code?

'use client';

import { useState, useEffect, useRef } from 'react';
import Highcharts from 'highcharts/es-modules/masters/highcharts.src.js';
import HighchartsReact from 'highcharts-react-official'
import 'highcharts/es-modules/masters/modules/histogram-bellcurve.src.js';
import 'highcharts/es-modules/masters/modules/draggable-points.src.js';
import 'highcharts/es-modules/masters/modules/sankey.src.js';
import 'highcharts/es-modules/masters/modules/exporting.src.js';
import 'highcharts/es-modules/masters/highcharts-more.src.js';
import 'highcharts/es-modules/masters/modules/heatmap.src.js';
import 'highcharts/es-modules/masters/modules/accessibility.src.js';

export default function HighChartsReactInternal({ options }) {
  return (
    <HighchartsReact highcharts={Highcharts} options={options} />)
}

Unfortunately the HeatMap with this code still dies in production. It is good in dev and all the other charts work fine in both environment. I got an example here. I noted that the example has next.js 13.5.1 while mine is at 13.0.5. I am not sure if this may cause the problem. I have everything else the same as in the example. I even dynamic import the HighChartsReactInternal module with ssr: false.

I paid for the Advantage support is there a way of a direct look at the code and discuss?

Thanks,
Peter

KamilKubik · 2025-02-21T13:35:07Z

Thanks for your clarification, @pgeday.

I've managed to reproduce this issue by using a live environment with files uploaded to the server. It seems to be module-related and, more specifically, to how Next.js treats rendering. Highcharts should be rendered on the client side, and, in theory, we shouldn't encounter any errors when running it in an 'isolated' client-side environment, which we are trying to achieve using the suggestions above.

It seems using the ESM imported in an 'isolated' way along with the Next.js v13.0.7 fixes all errors in my environment. I'm sharing the example code below (you should be able to render this component without dynamic import). Could you bump up your version and confirm whether it works for you as well? I can see that upgrading to the latest version is not an option, but hopefully, upgrading to version 13.0.7 shouldn't affect the rest of your application. Also, to answer your question regarding the initialization, the code you shared is the correct approach (importing ESM, also shown below).

"use client";

import React, { useEffect, useState } from "react";
import Highcharts from "highcharts/es-modules/masters/highcharts.src.js";
import HighchartsReact from "highcharts-react-official";

const loadHighchartsModules = async (callback: () => void) => {
  Promise.all([
    import("highcharts/es-modules/masters/modules/histogram-bellcurve.src.js"),
    import("highcharts/es-modules/masters/modules/draggable-points.src.js"),
    import("highcharts/es-modules/masters/modules/sankey.src.js"),
    import("highcharts/es-modules/masters/modules/exporting.src.js"),
    import("highcharts/es-modules/masters/highcharts-more.src.js"),
    import("highcharts/es-modules/masters/modules/heatmap.src.js"),
    import("highcharts/es-modules/masters/modules/accessibility.src.js"),
  ]).then(callback);
};

const HeatmapChart: React.FC = () => {
  const [options, setOptions] = useState({
    isLoading: true,
    data: {
      chart: {
        type: "heatmap",
        marginTop: 40,
        marginBottom: 80,
        plotBorderWidth: 1,
      },
      title: { text: "Title information", style: { fontSize: "1em" } },
      xAxis: { categories: ["S 1", "S 2"] },
      yAxis: { categories: ["T 1", "T 2"], title: null, reversed: true },
      accessibility: {
        point: {
          descriptionFormat:
            "{(add index 1)}. {series.xAxis.categories.(x)} {series.yAxis.categories.(y)}, {value}.",
        },
      },
      colorAxis: { minColor: "#00e272", maxColor: "#fa4b42" },
      legend: {
        align: "right",
        layout: "vertical",
        margin: 0,
        verticalAlign: "top",
        y: 25,
        symbolHeight: 280,
      },
      tooltip: {
        format:
          "<b>{point.value}</b> from <br><b>{series.yAxis.categories.(point.y)}</b> at<br><b>{series.xAxis.categories.(point.x)}</b>",
      },
      credits: { enabled: false },
      series: [
        {
          borderWidth: 1,
          data: [
            [0, 0, 904.75],
            [1, 0, 904.75],
            [0, 1, 904.75],
            [1, 1, 904.75],
          ],
          dataLabels: {
            enabled: false,
            color: "#000000",
          },
        },
      ],
      responsive: {
        rules: [
          {
            condition: { maxWidth: 500 },
            chartOptions: {
              yAxis: { labels: { format: "{substr value 0 1}" } },
            },
          },
        ],
      },
    },
  });

  useEffect(() => {
    loadHighchartsModules(() => {
      setOptions((prev) => ({ ...prev, isLoading: false }));
    });
  }, []);

  if (options.isLoading) {
    return <div>Loading...</div>;
  }

  return <HighchartsReact highcharts={Highcharts} options={options.data} />;
};

export default HeatmapChart;

Advantage support is provided through an internal support channel, and I believe that I or my colleague will guide you to make it work. As the code is now reproducible, this seems sufficient for debugging, but we are still somewhat dependent on the Next.js specific environment. Let me know if you found the above helpful.

Regards!

KamilKubik self-assigned this Dec 4, 2024

KamilKubik mentioned this issue Dec 23, 2024

Issue: SeriesRegistry, AST & Undefined Errors in Highcharts Integration (Next.js >15 & React >19) #505

Open

h-yoshikawa44 mentioned this issue Feb 8, 2025

[アプデ]各種アプデしてメンテナンス 2025/02 h-yoshikawa44/resas-graph-app#22

Closed

KamilKubik mentioned this issue Feb 17, 2025

TypeError: Cannot read properties of undefined (reading 'SeriesRegistry') #508

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Highcharts v12 with NextJS #502

Highcharts v12 with NextJS #502

julioxavierr commented Dec 3, 2024 •

edited by highsoft-asagh-bot

Loading

julioxavierr commented Dec 3, 2024

KamilKubik commented Dec 4, 2024

julioxavierr commented Dec 4, 2024 •

edited

Loading

KamilKubik commented Dec 6, 2024

Bugrabugra commented Dec 10, 2024 •

edited

Loading

Bugrabugra commented Dec 10, 2024 •

edited

Loading

Bugrabugra commented Dec 10, 2024 •

edited

Loading

julioxavierr commented Dec 10, 2024 •

edited

Loading

KamilKubik commented Dec 10, 2024

Bugrabugra commented Dec 10, 2024

Bugrabugra commented Dec 10, 2024 •

edited

Loading

wesngu28 commented Dec 17, 2024 •

edited

Loading

KamilKubik commented Dec 18, 2024

wesngu28 commented Dec 18, 2024 •

edited

Loading

stovmascript commented Feb 19, 2025

pgeday commented Feb 19, 2025 •

edited

Loading

KamilKubik commented Feb 20, 2025 •

edited

Loading

pgeday commented Feb 20, 2025 •

edited

Loading

KamilKubik commented Feb 21, 2025

Highcharts v12 with NextJS #502

Highcharts v12 with NextJS #502

Comments

julioxavierr commented Dec 3, 2024 • edited by highsoft-asagh-bot Loading

julioxavierr commented Dec 3, 2024

KamilKubik commented Dec 4, 2024

julioxavierr commented Dec 4, 2024 • edited Loading

KamilKubik commented Dec 6, 2024

Bugrabugra commented Dec 10, 2024 • edited Loading

Bugrabugra commented Dec 10, 2024 • edited Loading

Bugrabugra commented Dec 10, 2024 • edited Loading

julioxavierr commented Dec 10, 2024 • edited Loading

KamilKubik commented Dec 10, 2024

Bugrabugra commented Dec 10, 2024

Bugrabugra commented Dec 10, 2024 • edited Loading

wesngu28 commented Dec 17, 2024 • edited Loading

KamilKubik commented Dec 18, 2024

wesngu28 commented Dec 18, 2024 • edited Loading

stovmascript commented Feb 19, 2025

pgeday commented Feb 19, 2025 • edited Loading

KamilKubik commented Feb 20, 2025 • edited Loading

pgeday commented Feb 20, 2025 • edited Loading

KamilKubik commented Feb 21, 2025

julioxavierr commented Dec 3, 2024 •

edited by highsoft-asagh-bot

Loading

julioxavierr commented Dec 4, 2024 •

edited

Loading

Bugrabugra commented Dec 10, 2024 •

edited

Loading

Bugrabugra commented Dec 10, 2024 •

edited

Loading

Bugrabugra commented Dec 10, 2024 •

edited

Loading

julioxavierr commented Dec 10, 2024 •

edited

Loading

Bugrabugra commented Dec 10, 2024 •

edited

Loading

wesngu28 commented Dec 17, 2024 •

edited

Loading

wesngu28 commented Dec 18, 2024 •

edited

Loading

pgeday commented Feb 19, 2025 •

edited

Loading

KamilKubik commented Feb 20, 2025 •

edited

Loading

pgeday commented Feb 20, 2025 •

edited

Loading