Real time chart with angular2 -highcharts

Question

I want to insert a real-time table into my angular2 application, I use angular2 -highcharts.

npm install angular2-highcharts --save 

app.component.ts

 import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { title = 'app works!'; options: Object; constructor() { this.options = { title : { text : 'simple chart' }, series: [{ data: [29.9, 71.5, 106.4, 129.2], }] }; } } 

app.component.html

 <chart [options]="options"></chart> 

app.module.ts

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; import {ChartModule} from "angular2-highcharts"; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpModule,ChartModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 

I had this error when starting the angular2 application: "There is no provider for HighchartsStatic!". Thanks in advance.

Answer 1

I ran into this exact problem. This solution from matthiaskomarek did the trick for me:

 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 

I am not sure why this question was rejected because it really is a problem. I immediately come across the same thing!

The documentation in highchart format as such assumes that ChartModule.forRoot(require('highcharts') is all that is required (filling out, of course, missing ) in the documentation). With angular-cli-projects, I can never work require , therefore declare var require: any; usually does the trick. Except here, calling it in the context of forRoot seems to result in:

Error in error. A reference to a local (unexported) "require" character. Consider exporting a character (position 18:14 to the source .ts file) allowing the AppModule character in ... app / app.module.ts

My guess is that matthiaskomarek workaround avoids this.

Answer 2

You need to use ChartModule.forRoot() in your imports:

 @NgModule({ imports: [ BrowserModule, FormsModule, ChartModule.forRoot(require('highcharts')) // <-- HERE ], // ... }) export class AppModule { } 

Answer 3

 import { ChartModule } from 'angular2-highcharts'; import * as something from 'highcharts'; @NgModule({ declarations: [ AppComponent], imports: [ BrowserModule, FormsModule, HttpModule, ChartModule.forRoot(something).ngModule ], providers: [ChartModule.forRoot(something).providers], bootstrap: [AppComponent] }) 

Answer 4

Another workaround if the Marc Brazeau fix does not work for you (this is not for me) is as follows:

 import {ChartModule} from 'angular2-highcharts'; import {HighchartsStatic} from 'angular2-highcharts/dist/HighchartsService'; import * as highcharts from 'highcharts'; @NgModule({ declarations: [AppComponent], imports: [ChartModule], providers: [ { provide: HighchartsStatic, useValue: highcharts }], bootstrap: [AppComponent] }) export class AppModule { } 

Answer 5

Finally, I got a solution for this, check out my app.module file:

 import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MaterialModule } from '@angular/material'; import 'hammerjs'; import { ChartModule } from 'angular2-highcharts'; import * as highcharts from 'highcharts'; import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService'; import { AppRouting } from './app.routing'; import { AppComponent } from './app.component'; declare var require: any; export function highchartsFactory() { const hc = require('highcharts'); const dd = require('highcharts/modules/drilldown'); dd(hc); return hc; } @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, FormsModule, HttpModule, AppRouting, BrowserAnimationsModule, MaterialModule, ChartModule ], providers: [{ provide: HighchartsStatic, useFactory: highchartsFactory }], bootstrap: [AppComponent] }) export class AppModule { }