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-chartponent.ts (my-network-chartponent.ts:9)
at __webpack_require__ (bootstrap:78)
at Module../src/app/app.module.ts (appponent.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);

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.ponent.ts (my-network-chart.ponent.ts:9)
at __webpack_require__ (bootstrap:78)
at Module../src/app/app.module.ts (app.ponent.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);

• javascript
• angular
• highcharts
• highcharts-ng
• angular2-highcharts

2 Answers 2

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

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.