javascriptangularhighchartshighcharts-ngangular2-highcharts

highcharts organization chart is throwing error when loading module


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);

Solution

  • 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