Cannot run basic Network Graph on React

[christiansakai]

Hi, I am trying to use React with Highcharts, creating Network Graph. I tried to run this code, taken from the example on basic network graph

Code: Select all

import React from 'react';
import Highcharts from 'highcharts/highstock';
import HighchartsReact from 'highcharts-react-official';
import networkgraph from 'highcharts/modules/networkgraph';

import { DAGData } from 'src/typings/dag';

if (typeof Highcharts === 'object') {
  networkgraph(Highcharts);
}

export interface Props {
  data: DAGData[];
}

export function DAG2(props: Props): JSX.Element {
  const options = {
    chart: {
      type: 'networkgraph',
      plotBorderWidth: 1,
    },
    title: {
      text: 'Networkgraph with random initial positions',
    },
    plotOptions: {
      networkgraph: {
        keys: ['from', 'to'],
      },
    },
    series: [
      {
        layoutAlgorithm: {
          enableSimulation: true,
          initialPositions: function () {
            // @ts-ignore
            var chart = this.series[0].chart,
              width = chart.plotWidth,
              height = chart.plotHeight;

            // @ts-ignore
            this.nodes.forEach(function (node) {
              // If initial positions were set previously, use that
              // positions. Otherwise use random position:
              node.plotX = node.plotX === undefined ? Math.random() * width : node.plotX;
              node.plotY = node.plotY === undefined ? Math.random() * height : node.plotY;
            });
          },
        },
        name: 'K8',
        data: [
          ['A', 'B'],
          ['A', 'C'],
          ['A', 'D'],
          ['A', 'E'],
          ['A', 'F'],
          ['A', 'G'],

          ['B', 'C'],
          ['B', 'D'],
          ['B', 'E'],
          ['B', 'F'],
          ['B', 'G'],

          ['C', 'D'],
          ['C', 'E'],
          ['C', 'F'],
          ['C', 'G'],

          ['D', 'E'],
          ['D', 'F'],
          ['D', 'G'],

          ['E', 'F'],
          ['E', 'G'],

          ['F', 'G'],
        ],
      },
    ],
  };

  return <HighchartsReact highcharts={Highcharts} options={options} constructorType="stockChart" />;
}

and it gave me this error

Code: Select all

networkgraph.src.js:3115 Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')
    at d.<anonymous> (networkgraph.src.js:3115:1)
    at highstock.src.js:1649:1
    at Array.forEach (<anonymous>)
    at y (highstock.src.js:1646:1)
    at a.update (highstock.src.js:39207:1)
    at highstock.src.js:32916:1
    at Array.forEach (<anonymous>)
    at highstock.src.js:32900:1
    at Array.forEach (<anonymous>)
    at a.update (highstock.src.js:32888:1)

[christiansakai]

Actually nevermind, I was able to. Thank you

[kamil.k]

Hello christiansakai,

That's great to hear you figured it out! If the issue was related directly to the Highcharts, feel free to share your solution in case the other customers will face the same problem.

Kind Regards!