Angular2-highcharts not working

[phani257]

I have created a new project using angular-cli I followed all the steps that are suggested at the page https://www.npmjs.com/package/angular2-highcharts

npm install angular2-highcharts --save import { ChartModule } from 'angular2-highcharts'; ChartModule.forRoot(require('highcharts')

When I run the app, it says cannot find name 'require' Do I need to follow any other steps.

[cebor]

Install types for node should fix this warning.

npm install -D @types/node

[DuncanFaulkner]

Hi, I had a similar issue. there is a detailed issue in this repo I can't remember the number of the top of my head.

I think what I did to resolve it was to import HighchartsStatic from HighchartsService and then add in the app.module

export function highchartsFactory() { return require('highcharts'); }

[phani257]

@cebor npm install -D @types/node didn't help me to fix the issue

[phani257]

@DuncanFaulkner Can you please elaborate. I didn't get it exactly.

[matthiaskomarek]

This is the other issue for the "require problem" https://github.com/gevgeny/angular2-highcharts/issues/176

You can also just add:

declare var require: any;

To your module where you want to require highcharts

[phani257]

@matthiaskomarek I added declare var require: any; in my app.module.ts. Once I add that, I am getting the below error. Please let me know if I need to do any changes.

ERROR in Error encountered resolving symbol values statically. Reference to a lo cal (non-exported) symbol 'require'. Consider exporting the symbol (position 8:1 3 in the original .ts file), resolving symbol AppModule in c:/Projects/Highchart s/Highcharts/src/app/app.module.ts webpack: Failed to compile.

[matthiaskomarek]

This is how i do it inside my app.module.ts

import { ChartModule } from 'angular2-highcharts';
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';

declare var require: any;
export function highchartsFactory() {
  return require('highcharts');
}

@NgModule({
  imports: [
      ChartModule
  ],
  declarations: [ AppComponent ],
  exports: [],
  providers: [
    {
      provide: HighchartsStatic,
      useFactory: highchartsFactory
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule

[luiscvalmeida]

Happening the same for me, angular2 v4, the @matthiaskomarek answer allowed me to compile the code the crashes on browser.

[matthiaskomarek]

@luiscvalmeida can you be more specific about "the code crashes on browser". Because with chrome 57 it works

[danielyankowski]

@matthiaskomarek thanks for the solution. It allows to compile without error however I get the ' Chart is unknown chart type.' error in the console and highcharts do not load...

[matthiaskomarek]

@danielyankowski can you please provide some code?

[Den-dp]

Also instead of declaring a require keyword you can try this:

import { ChartModule } from 'angular2-highcharts';
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';
+import * as highcharts from 'highcharts';

-declare var require: any;
-export function highchartsFactory() {
-  return require('highcharts');
-}

@NgModule({
  imports: [
      ChartModule
  ],
  declarations: [ AppComponent ],
  exports: [],
  providers: [
    {
      provide: HighchartsStatic,
-     useFactory: highchartsFactory
+     useValue: highcharts
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule

/cc @matthiaskomarek

[danielyankowski]

@matthiaskomarek Thanks for help, everything works now, my mistake was not importing necessary highcharts dependencies :) @Den-dp Thanks, this solution looks like the fastest way to deal with the import :) however I read in some other thread, that importing all higcharts dependencies might not be the most efficient way. My code now is slightly extended @matthiaskomarek 's solution, I modified highchartsFactory function so now it includes dependencies necessary for my project:

export function highchartsFactory() {
    var hc = require('highcharts');
    var hcm = require('highcharts/highcharts-more');
    var sg = require('highcharts/modules/solid-gauge');
    hcm(hc);
    sg(hc);
    return hc;
}

[budcribar]

Tried Den-dp's suggestion import * as highcharts from 'highcharts'; providers: [ { provide: HighchartsStatic, useValue: highcharts },

but received a compile error on this line: useValue: highcharts

cannot find name highcharts

so I changed to

import * as Highcharts from 'highcharts'; providers: [ { provide: HighchartsStatic, useValue: Highcharts },

which compiles fine but at run time I get:

bundle.min.js:1 ERROR Error: Base Highcharts module should be set via ChartModule.init at Object.Yg [as initChart] (bundle.min.js:5) [angular] at t.init (bundle.min.js:37) [angular] at t.ngAfterViewInit (bundle.min.js:37) [angular] at Pn (bundle.min.js:1) [angular] at Sn (bundle.min.js:1) [angular]

I am using angular 4.03

any ideas? thanks, bud

[wittml]

The combination of @matthiaskomarek's code + what @danielyankowski added did the trick for me. Anybody know if this will be the final answer or will another solution be forthcoming?

[Wandang]

@budcribar try this (works for me):

import { ChartModule } from 'angular2-highcharts';
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';
import * as highcharts from 'highcharts';

export function highchartsFactory() {
  return highcharts;
}
imports: [
ChartModule
],
  providers: [
    {
      provide: HighchartsStatic,
      useFactory: highchartsFactory
    }
  ]

[sichangi]

@Wandang Yup, it Worked for me. Thanks.

[matudelatower]

in ionic 3.3.0 works for me @matthiaskomarek with extends of @danielyankowski

Great!

[joshuazmiller]

I spent a number of hours on this issue, and @Wandang solution is the way to go!

[ChrisDevinePimss]

how can i import 'highcharts' and 'highcharts/highstocks' at the same time with this method?

[matudelatower]

@ChrisDevinePimss which method?

[ChrisDevinePimss]

@matudelatower

Hi mat am currently using `export declare let require: any;

export function highchartsFactory() { const hc = require('highcharts/highstock'); const dd = require('highcharts/modules/exporting'); dd(hc);

return hc; }`

but am unsure how i would bring in 'highcharts/highmaps'. i tried the below but it failed to work

`export declare let require: any;

export function highchartsFactory() { const hc = require('highcharts/highstock'); const hm = require('highcharts/highmaps'); const dd = require('highcharts/modules/exporting'); dd(hc); hm(hc) return hc; }`

I knew it was a long shot but i though i would try it. any idea how i can use both highstock and highmaps

[matudelatower]

@ChrisDevinePimss check this https://github.com/usinapim/SiMOR/blob/feature/3.0.0/src/pages/home/home.module.ts

[carbcab]

@ChrisDevinePimss I'm trying to import highstock and highmaps together also. Did you find a fix to that? Thanks.

[ChrisDevinePimss]

@carbcab no sorry, will update if i do

[ctlong]

@Den-dp your method is working for me, but I've no idea how to add other modules (like maps) to it. require compiles but doesn't work at all during runtime, the error Typeerror: 'require' is not a function at execute breaks everything.

[coldAlphaMan]

@Wandang solution worked for me as well.

I was getting the following error (using ionic 3):

Chart is unknown chart type ionic chart

implemented his solution and worked perfectly :)

[hhmultimediallc]

@Wandang solution worked perfect for me as well! Great job, @Wandang!

[yashjit]

sunburst not working in angular 4. Need help. How to create sunburst chart in angular 4.

[akshaychand]

@ChrisDevinePimss I am also looking for a solution to import both Highstocks and Highmaps using injected factory. Any help is appreciated.

UPDATE: Actually I got it to work. I am not sure why it works but here's what works for me

import { ChartModule } from 'angular2-highcharts';
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';
import * as highchart from 'highcharts';

 declare var require: any;

 export function highchartsFactory() {
  const Highcharts = require('highcharts/highstock');
  const Highmaps = require('highcharts/highmaps');

  const more = require('highcharts/highcharts-more');
  const exporting = require('highcharts/modules/exporting');
  const drilldown = require('highcharts/modules/drilldown');
  const heatmap = require('highcharts/modules/heatmap');

  // This one throws a javascript prototype error if Highmaps is passed.
  more(Highcharts);  

 // Below changes are getting applied to Highcharts, too (I am not sure why)...
  exporting(Highmaps); 
  drilldown(Highmaps);
  heatmap(Highmaps);

  Highmaps.setOptions({
    credits: false
  });

  // Below export does not apply to highmaps, hence commented
  // return Highcharts;

  // Return highmaps instead...
  return Highmaps;
 }

@NgModule({
   ...
  imports: [
     ...
     ChartModule
  ]
});

To test the highmaps, I am using options from this Plunker

[akashbanginwar]

If you want to use different Highcharts like Histogram, Heat Map in angular 2

1. In module file you need to import import { BrowserModule } from '@angular/platform-browser'; import { ChartModule } from 'angular2-highcharts'; import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService'; import * as highchart from 'highcharts';

then

2. export declare let require: any;

then

3. export function highchartsFactory() { const hc = require('highcharts'); const hcm = require('highcharts/highcharts-more'); // used for more category of charts const histogram = require('highcharts-histogram-bellcurve'); const exporting = require('highcharts/modules/exporting');

histogram(hc); // as per the requirement return hc; }

then

@NgModule({ imports: [ BrowserModule, ChartModule, ]

then

5. providers: [ {provide: HighchartsStatic, useFactory: highchartsFactory} ]

[dscoular]

Hi All, I was using Akashbanginwar's solution above and it worked perfectly until I upgraded my app to use angular 5.2.7 with typescript 2.6.2. I now get the following error in Chrome:

ERROR Error: Uncaught (in promise): TypeError: exports.require is not a function TypeError: exports.require is not a function at highchartsFactory (app.module.ts:77) ... truncated for brevity ...

and a similar error from Firefox:

message: "Uncaught (in promise): TypeError: exports.require is not a function highchartsFactory@webpack-internal:///./src/app/app.module.ts:72:14 _callFactory@webpack-internal:///./node_modules/@angular/core/esm5/core.js:11130:20 _createProviderInstance$1@webpack-> internal:///./node_modules/@angular/core/esm5/core.js:11084:26 resolveNgModuleDep@webpack-internal:///./nodemodules/@angular/core/esm5/core.js:11066:17 NgModuleRef.prototype.get@webpack-internal:///./node_modules/@angular/core/esm5/core.js:12303:16 resolveDep@webpack-internal:///./node_modules/@angular/core/esm5/core.js:12793:12 createClass@webpack-internal:///./node_modules/@angular/core/esm5/core.js:12655:29 _createProviderInstance@webpack-internal:///./node_modules/@angular/core/esm5/core.js:12632:20 createProviderInstance@webpack-internal:///./node_modules/@angular/core/esm5/core.js:12473:12 createViewNodes@webpack-internal:///./node_modules/@angular/core/esm5/core.js:13945:53 callViewAction@webpack-internal:///./node_modules/@ang…"

I don't quite understand the usage in the solution or the intent of large parts of the code. My apologies.

In the second step we seem to declare an export of a variable called "require" of type "any".

export declare let require: any;

Then we seem to use that "require" variable as if it was a function or a type cast:

const hc = require('highcharts');

Here's the code that was working:

export function highchartsFactory() {
  const hc = require("highcharts");
  const dd = require("highcharts/modules/drilldown");
  const ex = require("highcharts/modules/exporting");
  const st = require("highcharts/modules/stock");
  const hm = require("highcharts/modules/heatmap");
  const tm = require("highcharts/modules/treemap");
  const th = require("highcharts/themes/dark-unica");

  dd(hc);
  ex(hc);
  st(hc);
  hm(hc);
  tm(hc);
  th(hc);

  return hc;
}

Any thoughts on why I'm now getting this "exports.require" issue with the latest angular?

[dscoular]

Hi All, I discovered if I simply removed the line:

export declare let require: any;

My code started working again under angular 5.2.7... does anyone have any insights as to what Akashbanginwar's magic above does and why the "require" declaration is no longer needed?

Cheers,

Doug

[dscoular]

Hi All, Actually, there's a more complex interaction going on... if I remove the:

export declare let require: any;

and run "ng serve" sometimes the webpack builds successfully but with the following error:

macpro:frontend dscoular$ ng serve NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ Date: 2018-03-08T08:05:59.624Z Hash: 5a2342e6c00b0f69034c Time: 49743ms chunk {inline} inline.bundle.js (inline) 3.85 kB [entry] [rendered] chunk {main} main.bundle.js (main) 286 kB [initial] [rendered] chunk {polyfills} polyfills.bundle.js (polyfills) 548 kB [initial] [rendered] chunk {styles} styles.bundle.js (styles) 634 kB [initial] [rendered] chunk {vendor} vendor.bundle.js (vendor) 20.1 MB [initial] [rendered]

webpack: Compiled successfully. webpack: Compiling... 90% chunk assets processingERROR in src/app/app.module.ts(77,14): error TS2304: Cannot find name 'require'. src/app/app.module.ts(78,14): error TS2304: Cannot find name 'require'. src/app/app.module.ts(79,14): error TS2304: Cannot find name 'require'. src/app/app.module.ts(80,14): error TS2304: Cannot find name 'require'. src/app/app.module.ts(81,14): error TS2304: Cannot find name 'require'. src/app/app.module.ts(82,14): error TS2304: Cannot find name 'require'. src/app/app.module.ts(83,14): error TS2304: Cannot find name 'require'. src/app/app.module.ts(135,8): error TS2304: Cannot find name 'require'. src/app/app.module.ts(136,8): error TS2304: Cannot find name 'require'. src/app/app.module.ts(137,8): error TS2304: Cannot find name 'require'. src/app/app.module.ts(138,8): error TS2304: Cannot find name 'require'.

Date: 2018-03-08T08:06:24.140Z - Hash: 289740c4b7c89a8bbd5a - Time: 7677ms 3 unchanged chunks chunk {main} main.bundle.js (main) 287 kB [initial] [rendered] chunk {vendor} vendor.bundle.js (vendor) 21 MB [initial] [rendered] webpack: Compiled successfully.

But at other times the "ng serve" commands fails to build the webpack!?!!

macpro:frontend dscoular$ ng serve NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ Date: 2018-03-08T08:03:16.968Z Hash: 853b736fc81236b6b609 Time: 6290ms chunk {inline} inline.bundle.js (inline) 3.85 kB [entry] [rendered] chunk {main} main.bundle.js (main) 2.91 kB [initial] [rendered] chunk {polyfills} polyfills.bundle.js (polyfills) 577 bytes [initial] [rendered] chunk {styles} styles.bundle.js (styles) 634 kB [initial] [rendered] chunk {vendor} vendor.bundle.js (vendor) 852 kB [initial] [rendered]

ERROR in src/app/app.module.ts(77,14): error TS2304: Cannot find name 'require'. src/app/app.module.ts(78,14): error TS2304: Cannot find name 'require'. src/app/app.module.ts(79,14): error TS2304: Cannot find name 'require'. src/app/app.module.ts(80,14): error TS2304: Cannot find name 'require'. src/app/app.module.ts(81,14): error TS2304: Cannot find name 'require'. src/app/app.module.ts(82,14): error TS2304: Cannot find name 'require'. src/app/app.module.ts(83,14): error TS2304: Cannot find name 'require'. src/app/app.module.ts(135,8): error TS2304: Cannot find name 'require'. src/app/app.module.ts(136,8): error TS2304: Cannot find name 'require'. src/app/app.module.ts(137,8): error TS2304: Cannot find name 'require'. src/app/app.module.ts(138,8): error TS2304: Cannot find name 'require'.

webpack: Failed to compile.

I can't understand why the webpack succeeds sometimes and fails at others... no actual code has changed. I merely edit a comment to force recompilation.

Any help hugely appreciated...

[hakimio]

@dscoular Might be worth checking the following fork: https://github.com/blackline/angular2-highcharts and following pull request: https://github.com/gevgeny/angular2-highcharts/pull/257

[dscoular]

Hi Tomas, Thanks so much for responding. I've tried to use the blackline fork but I'm still a bit new to node, npm and angular. I first tried installing from the git repo via:

 457 ⎸macpro:frontend dscoular$ npm install --save blackline/angular2-highcharts
 458 ⎸npm WARN karma-jasmine@1.1.1 requires a peer of jasmine-core@* but none is installed. You must install peer dependencies yourself.
 459 ⎸npm WARN karma-jasmine@1.1.1 requires a peer of karma@* but none is installed. You must install peer dependencies yourself.
 460 ⎸npm WARN karma-jasmine-html-reporter@0.2.2 requires a peer of karma@>=0.9 but none is installed. You must install peer dependencies yourself.
 461 ⎸
 462 ⎸+ @blackline/angular2-highcharts@1.0.0
 463 ⎸added 2 packages from 7 contributors and removed 1 package in 23.04s 

I failed to install the two peer packages but I thought that would be fine if I didn't run the tests:

 464 ⎸macpro:frontend dscoular$ npm install --save jasmine-core karma
 465 ⎸npm ERR! code ETARGET
 466 ⎸npm ERR! notarget No matching version found for karma@^2.0.01
 467 ⎸npm ERR! notarget In most cases you or one of your dependencies are requesting
 468 ⎸npm ERR! notarget a package version that doesn't exist.
 469 ⎸
 470 ⎸npm ERR! A complete log of this run can be found in:
 471 ⎸npm ERR!     /Users/dscoular/.npm/_logs/2018-03-17T05_29_11_327Z-debug.log

and I changed my import statements to use the \@blackline prefix:

 24 ⎸import { ChartModule } from '@blackline/angular2-highcharts';
 25 ⎸import { HighchartsStatic } from "@blackline/angular2-highcharts/dist/HighchartsService";

But the "blackline/angular2-highcharts/index.js" seems to expect to require a "dist/index" which doesn't exist (I don't see a src directory either) and, understandably, fails:

      ERROR in node_modules/@blackline/angular2-highcharts/index.d.ts(1,15): error TS2307: Cannot find module './dist/index'.
      src/app/app.module.ts(24,10): error TS2305: Module '"/Users/dscoular/projects/ucs-central-dashboard/frontend/node_modules/@blackline/angular2-highcharts/index"' has no exported member 'ChartModule'.

So, I then thought maybe I needed to build the "blackline/angular2-highcharts" package so I tried changing in to the directory and running its build script:

1214 ⎸macpro:frontend dscoular$ cd node_modules/@blackline/angular2-highcharts/
1215 ⎸macpro:angular2-highcharts dscoular$ npm run-script build

      > @blackline/angular2-highcharts@1.0.0 build /Users/dscoular/projects/ucs-central-dashboard/frontend/node_modules/@blackline/angular2-highcharts
      > rm -rf dist && ngc

      error TS18003: No inputs were found in config file 'tsconfig.json'. Specified 'include' paths were '["src/**/*"]' and 'exclude' paths were '["examples","index.d.ts","node_modules","dist"]'.

      npm ERR! code ELIFECYCLE
      npm ERR! errno 1
      npm ERR! @blackline/angular2-highcharts@1.0.0 build: `rm -rf dist && ngc`
      npm ERR! Exit status 1
      npm ERR!
      npm ERR! Failed at the @blackline/angular2-highcharts@1.0.0 build script.
      npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

      npm ERR! A complete log of this run can be found in:
      npm ERR!     /Users/dscoular/.npm/_logs/2018-03-17T06_06_11_600Z-debug.log

Apologies for my confusion but if you have any tips for a learner... that would be fantastic!

Cheers,

Doug

P.S. My attempts to use a backslash to quote the ampersand symbol failed miserably.

[hakimio]

Can you just try to put the following in your package.json

"angular2-highcharts": "git+https://github.com/blackline/angular2-highcharts"

And then run npm install? karma-jasmine is only needed for testing and, if you use the above line in package.json, you shouldn't need any import statement changes.

If that still doesn't work for you, you should just try a different angular-highcharts package which works fine with Angular 5: https://github.com/cebor/angular-highcharts

# install angular-highcharts and highcharts
npm i --save angular-highcharts highcharts

# install highcharts typings
npm i --save-dev @types/highcharts

[dscoular]

Hi @hakimio, I tried applying your modification to my package.json but still got the dist/index error... so I took your advice and went with a fork which had the most recent commits I could find and supported events: "https://github.com/howtimeflies-io/ngx-highcharts". It works perfectly and modules are just loaded via a modules attribute on the ngx-chart directive... nice!

I've always been a bit mystified by github and how you know which of bucket-load of forks to choose from... there are forks upon forks.

Again, thanks for all your help. I hope your pull request gets merged soon.

Cheers,

Doug

[hakimio]

@dscoular I usually check last commit date and amount of stars when choosing a library on github. Last commit being more than a year old like here usually means that the repo is dead.

BTW, "cebor/angular-highcharts" supports HighCharts events the following way: https://github.com/cebor/angular-highcharts/issues/50

Anyway, glad it's working for you now.