-1

I have included the highcharts module and I want to implement network graph of highchart in angular. Could you please help me out to implement it?

Please find the stackblitz link below:

https://stackblitz.com/edit/angular-sfytxa?file=src%2Fapp%2Fapp.component.ts

Wojciech Chmiel
  • 7,302
  • 1
  • 7
  • 16
UI DEV
  • 43
  • 1
  • 8
  • `Please find the [main information elsewhere]` That is not how stack**overflow** works. You want a helpful answer *here*? [Ask a Good Question](https://stackoverflow.com/help/how-to-ask). *Here*. – greybeard Mar 20 '23 at 13:56

3 Answers3

7

Simply you have to load networkgraph module and initialize it like that:

import * as Highcharts from "highcharts";
import * as HighchartsNetworkgraph from "highcharts/modules/networkgraph";

HighchartsNetworkgraph(Highcharts);

Demo:

I recommend you using highcharts-angular official wrapper. It can be downloaded here: https://github.com/highcharts/highcharts-angular

Wojciech Chmiel
  • 7,302
  • 1
  • 7
  • 16
  • please can you help me in this: https://stackoverflow.com/questions/62493387/highcharts-network-graph-custom-link-labels – hamza saber Jun 21 '20 at 01:58
5

Thanks the solution @Wojciech Chmiel, it helped me a lot.

However with the latest version of the high charts, angular and other dependencies the above mentioned solution was not working. It was giving me below error

This expression is not callable.
  Type 'typeof import("/node_modules/highcharts/modules/networkgraph")' has no call signatures.ts(2349)

The dependencies and the versions i have are as below

"@angular/animations": "^9.0.6",
"@angular/cdk": "^9.1.3",
"@angular/common": "^9.0.6",
"@angular/compiler": "^9.0.6",
"@angular/core": "^9.0.6",
"@angular/forms": "^9.0.6",
"@angular/http": "^7.2.16",
"@angular/platform-browser": "^9.0.6",
"@angular/platform-browser-dynamic": "^9.0.6",
"@angular/router": "^9.0.6",
angular-highcharts": "^9.0.2",
highcharts": "^8.0.4",
highcharts-angular": "^2.4.0",

The solution i have is 

import * as Highcharts from "highcharts";
import HighchartsNetworkgraph from "highcharts/modules/networkgraph";
import HighchartsExporting from "highcharts/modules/exporting";

HighchartsNetworkgraph(Highcharts);
HighchartsExporting(Highcharts);
Rajeshwar
  • 2,290
  • 4
  • 31
  • 41
0

just replace * as with import HighchartsNetworkgraph from "highcharts/modules/networkgraph";

Tanveer Khan
  • 1
  • 1