I was trying to implement networkgraph in my React + Next project as a reusable component.

This is the component that I am working with -

import React, { useEffect, useRef } from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import HighchartsNetworkgraph from 'highcharts/modules/networkgraph';

// Initialize the networkgraph module
if (typeof Highcharts === 'object') {
    HighchartsNetworkgraph(Highcharts);
}

const NetworkGraph = ({
    data,
    titleText = "Custom graph",
    subtitleText = "A Force-Directed Network Graph in Highcharts",
    loading,
    options: userOptions = {}
}) => {
    const chartRef = useRef(null);

    useEffect(() => {
        if (chartRef.current && chartRef.current.chart) {
            if (loading) {
                chartRef.current.chart.showLoading('Loading...');
            } else {
                chartRef.current.chart.hideLoading();
            }
        }
    }, [loading]);

    const defaultOptions = {
        chart: {
            type: 'networkgraph',
            height: '100%'
        },
        title: {
            text: titleText,
            align: 'left'
        },
        subtitle: {
            text: subtitleText,
            align: 'left'
        },
        plotOptions: {
            networkgraph: {
                keys: ['from', 'to'],
                layoutAlgorithm: {
                    enableSimulation: true,
                    friction: -0.9,
                    gravitationalConstant: 0.06
                }
            }
        },
        series: [{
            accessibility: {
                enabled: false
            },
            dataLabels: {
                enabled: true,
                linkFormat: '',
                style: {
                    fontSize: '0.8em',
                    fontWeight: 'normal'
                }
            },
            id: 'lang-tree',
            data:  [
                ['node1', 'node2'],
                ['node1', 'node3'],
            ],
            nodes: data?.nodes || []
        }],
        credits: { enabled: false }
    };

    const mergedOptions = Highcharts.merge(defaultOptions, userOptions);

    return (
        <div style={{ position: 'relative', minHeight: '400px' }}>
            <HighchartsReact
                ref={chartRef}
                highcharts={Highcharts}
                options={mergedOptions}
            />
        </div>
    );
};

export default NetworkGraph;

and I am using it like this in another component -

// ... earlier code
const customData = [['s1', 't1'], ['s2', 't2']];

return (
    <NetworkGraph data={customData} loading={false} />
)

I am getting this error -

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'forEach')

Call Stack
w.eval
node_modules\highcharts\modules\networkgraph.js (9:25562)
eval
node_modules\highcharts\highcharts.js (8:2523)
Array.forEach
<anonymous>
M
node_modules\highcharts\highcharts.js (8:2475)
w.update
node_modules\highcharts\highcharts.js (8:178168)
eval
node_modules\highcharts\highcharts.js (8:215843)
Array.forEach
<anonymous>
eval
node_modules\highcharts\highcharts.js (8:215786)
Array.forEach
<anonymous>
Q.update
node_modules\highcharts\highcharts.js (8:215737)
eval
node_modules\highcharts-react-official\dist\highcharts-react.min.js (1:3033)
React
commitHookEffectListMount
node_modules\react-dom\cjs\react-dom.development.js (23189:1)
commitLayoutEffectOnFiber
node_modules\react-dom\cjs\react-dom.development.js (23307:1)
commitLayoutMountEffects_complete
node_modules\react-dom\cjs\react-dom.development.js (24727:1)
commitLayoutEffects_begin
node_modules\react-dom\cjs\react-dom.development.js (24713:1)
commitLayoutEffects
node_modules\react-dom\cjs\react-dom.development.js (24651:1)
commitRootImpl
node_modules\react-dom\cjs\react-dom.development.js (26862:1)
commitRoot
node_modules\react-dom\cjs\react-dom.development.js (26721:1)
finishConcurrentRender
node_modules\react-dom\cjs\react-dom.development.js (26020:1)
performConcurrentWorkOnRoot
node_modules\react-dom\cjs\react-dom.development.js (25848:1)
workLoop
node_modules\scheduler\cjs\scheduler.development.js (266:1)
flushWork
node_modules\scheduler\cjs\scheduler.development.js (239:1)
MessagePort.performWorkUntilDeadline
node_modules\scheduler\cjs\scheduler.development.js (533:1)

I have spent considerable amount of time on this bug, and am not able to debug from which part of my code this issue is coming ... any guidance or suggestions would be greatly appreciated

I was trying to implement networkgraph in my React + Next project as a reusable component.

This is the component that I am working with -

import React, { useEffect, useRef } from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import HighchartsNetworkgraph from 'highcharts/modules/networkgraph';

// Initialize the networkgraph module
if (typeof Highcharts === 'object') {
    HighchartsNetworkgraph(Highcharts);
}

const NetworkGraph = ({
    data,
    titleText = "Custom graph",
    subtitleText = "A Force-Directed Network Graph in Highcharts",
    loading,
    options: userOptions = {}
}) => {
    const chartRef = useRef(null);

    useEffect(() => {
        if (chartRef.current && chartRef.current.chart) {
            if (loading) {
                chartRef.current.chart.showLoading('Loading...');
            } else {
                chartRef.current.chart.hideLoading();
            }
        }
    }, [loading]);

    const defaultOptions = {
        chart: {
            type: 'networkgraph',
            height: '100%'
        },
        title: {
            text: titleText,
            align: 'left'
        },
        subtitle: {
            text: subtitleText,
            align: 'left'
        },
        plotOptions: {
            networkgraph: {
                keys: ['from', 'to'],
                layoutAlgorithm: {
                    enableSimulation: true,
                    friction: -0.9,
                    gravitationalConstant: 0.06
                }
            }
        },
        series: [{
            accessibility: {
                enabled: false
            },
            dataLabels: {
                enabled: true,
                linkFormat: '',
                style: {
                    fontSize: '0.8em',
                    fontWeight: 'normal'
                }
            },
            id: 'lang-tree',
            data:  [
                ['node1', 'node2'],
                ['node1', 'node3'],
            ],
            nodes: data?.nodes || []
        }],
        credits: { enabled: false }
    };

    const mergedOptions = Highcharts.merge(defaultOptions, userOptions);

    return (
        <div style={{ position: 'relative', minHeight: '400px' }}>
            <HighchartsReact
                ref={chartRef}
                highcharts={Highcharts}
                options={mergedOptions}
            />
        </div>
    );
};

export default NetworkGraph;

and I am using it like this in another component -

// ... earlier code
const customData = [['s1', 't1'], ['s2', 't2']];

return (
    <NetworkGraph data={customData} loading={false} />
)

I am getting this error -

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'forEach')

Call Stack
w.eval
node_modules\highcharts\modules\networkgraph.js (9:25562)
eval
node_modules\highcharts\highcharts.js (8:2523)
Array.forEach
<anonymous>
M
node_modules\highcharts\highcharts.js (8:2475)
w.update
node_modules\highcharts\highcharts.js (8:178168)
eval
node_modules\highcharts\highcharts.js (8:215843)
Array.forEach
<anonymous>
eval
node_modules\highcharts\highcharts.js (8:215786)
Array.forEach
<anonymous>
Q.update
node_modules\highcharts\highcharts.js (8:215737)
eval
node_modules\highcharts-react-official\dist\highcharts-react.min.js (1:3033)
React
commitHookEffectListMount
node_modules\react-dom\cjs\react-dom.development.js (23189:1)
commitLayoutEffectOnFiber
node_modules\react-dom\cjs\react-dom.development.js (23307:1)
commitLayoutMountEffects_complete
node_modules\react-dom\cjs\react-dom.development.js (24727:1)
commitLayoutEffects_begin
node_modules\react-dom\cjs\react-dom.development.js (24713:1)
commitLayoutEffects
node_modules\react-dom\cjs\react-dom.development.js (24651:1)
commitRootImpl
node_modules\react-dom\cjs\react-dom.development.js (26862:1)
commitRoot
node_modules\react-dom\cjs\react-dom.development.js (26721:1)
finishConcurrentRender
node_modules\react-dom\cjs\react-dom.development.js (26020:1)
performConcurrentWorkOnRoot
node_modules\react-dom\cjs\react-dom.development.js (25848:1)
workLoop
node_modules\scheduler\cjs\scheduler.development.js (266:1)
flushWork
node_modules\scheduler\cjs\scheduler.development.js (239:1)
MessagePort.performWorkUntilDeadline
node_modules\scheduler\cjs\scheduler.development.js (533:1)

I have spent considerable amount of time on this bug, and am not able to debug from which part of my code this issue is coming ... any guidance or suggestions would be greatly appreciated

• reactjs
• next.js
• highcharts
• react-highcharts

Share Improve this question Follow asked Mar 27 at 5:59 armangrewal007armangrewal007 2377 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Without a reproducer it's hard to tell what exactly caused the issue. I can suggest double check (via console.log) the following:

• data structure passed to series, including data.nodes - it needs to follow the requirements for networkgraph
• depending on the version of Highcharts you are using, ensure you are correctly initialising your modules (see the following article regarding changes with v12: https://www.highcharts/docs/getting-started/version-12
• also check how defaultOptions and userOptions are merged - there might be some intentional override of settings causing the issue here

I hope these suggestions help with debugging.

If you're still facing issues, consider creating a minimal reproducible example.