highcharts organization chart is throwing error when loading module

Question

I am trying to generate Organization charts using highcharts and highcharts-angular. However, it is throwing below error while loading organization chart module.

organization.js:9 Uncaught TypeError: Cannot read property 'prototype' of undefined
at organization.js:9
at e (organization.js:9)
at organization.js:9
at Module../src/app/my-network-chart/my-network-chart.component.ts (my-network-chart.component.ts:9)
at __webpack_require__ (bootstrap:78)
at Module../src/app/app.module.ts (app.component.ts:8)
at __webpack_require__ (bootstrap:78)
at Module../src/main.ts (main.ts:1)
at __webpack_require__ (bootstrap:78)
at Object.0 (main.ts:12)

Is there some wrong I am doing? I am using same code for generating network charts and it is working without any issue. I am facing this issue only with Organization chart.

Loading Organization chart:

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import HighchartsOrganization from "highcharts/modules/organization";
import HighchartsExporting from "highcharts/modules/exporting";

HighchartsOrganization(Highcharts);
HighchartsExporting(Highcharts);

Loading Network chart: No issue in this case

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import HighchartsNetworkgraph from "highcharts/modules/networkgraph";
import HighchartsExporting from "highcharts/modules/exporting";

HighchartsNetworkgraph(Highcharts);
HighchartsExporting(Highcharts);

score 6 · Accepted Answer · answered May 07 '19 at 19:45

The Organization chart module requires the Sankey diagram module so you need to import that first, e.g.:

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import HighchartsSankey from "highcharts/modules/sankey";
import HighchartsOrganization from "highcharts/modules/organization";
import HighchartsExporting from "highcharts/modules/exporting";

HighchartsSankey(Highcharts);
HighchartsOrganization(Highcharts);
HighchartsExporting(Highcharts);

See official Highcharts Organization example which imports sankey.js

Yes, that worked. I have completely overlooked the Sankey module. Thanks for the help. — Sreehari, May 08 '19 at 01:53

score 2 · Answer 2 · answered Jul 29 '19 at 18:11

To further expand on sheilak's answer, you need to import sankey BEFORE importing organization, otherwise you will still get the TypeError and maybe an Error 17 as well. If you open up the organization.src.js, you'll see the define at the top makes this organization chart depend on highcharts and sankey, which is why they must both be declared before it.
This got me because we use Bower to manage our dependencies and I first added organization then added sankey and was baffled as to why it was still throwing this error. Reordering the imports fixed it.

highcharts organization chart is throwing error when loading module

2 Answers2