Real time chart with angular2-highcharts

Question

I want to insert real time chart in my angular2 application, I'm using 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'm having this error when running my angular2 application : "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'm not sure why this question was voted down, because it really an issue. I'm running into the exact same thing here!

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

ERROR in Error encountered resolving symbol values statically. Reference to a local (non-exported) symbol 'require'. Consider exporting the symbol (position 18:14 in the original .ts file), resolving symbol AppModule in ... app/app.module.ts

My guess is that matthiaskomarek's 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 { }