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