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.

Marc Brazeau · Answer 1 · 2017-04-10T01:21:47.527

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.

I believe its not working in angular 11. Do you know anything about this ? — Subhabrata Banerjee, May 14 '21 at 13:29

AngularChef · Answer 2 · 2017-02-25T14:08:07.557

9

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

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

edited Feb 25 '17 at 14:08

answered Feb 25 '17 at 13:55

AngularChef

13,797
8
53
69

1

Have you read the [documentation](https://github.com/gevgeny/angular2-highcharts)? All the possible syntaxes are clearly explained... – AngularChef Feb 25 '17 at 14:08
file systemjs.config.js not found ... map: { ... 'angular2-highcharts': 'node_modules/angular2-highcharts', 'highcharts': 'node_modules/highcharts', } ... packages: { ... highcharts: { main: './highcharts.js', defaultExtension: 'js' }, 'angular2-highcharts': { main: './index.js', defaultExtension: 'js' } } – naruto Feb 25 '17 at 14:12
if it is easy so what is this error "No provider for HighchartsStatic!". – naruto Feb 25 '17 at 14:18
Did you write exactly `ChartModule.forRoot(require('highcharts'))`? – AngularChef Feb 25 '17 at 14:21
yes but where I can add map:{...} & packages: {...} because systemjs.config.js not found – naruto Feb 25 '17 at 14:29
Are you sure you're using SystemJS? How did you create your Angular app? – AngularChef Feb 25 '17 at 14:33
With CLI ,where I can add map:{...} & packages: {...} – naruto Feb 25 '17 at 14:42
There's no `systemjs.config.js` file with Angular CLI. If you read the angular2-highcharts documentation, it says "For angular-cli and other Webpack environments, no any additional setup needed". Maybe you should familiarize yourself with Angular and its environment before attempting more complex projects. – AngularChef Feb 25 '17 at 14:46
1

I have add ChartModule.forRoot(require('highcharts')) ,I have this error "Calling function 'ChartModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function" ,thanks – naruto Feb 25 '17 at 14:49
Using this 'forRoot' solution worked for me! using CLI – jhhoff02 May 23 '18 at 17:36
This is the correct solution, thanks @AngularChef ! – Torgia Aug 05 '22 at 07:47

score 4 · Answer 3 · answered Apr 21 '17 at 15:17

Another workaround if Marc Brazeau's fix doesn't work for you (it didn't for me) is to do the following:

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 {
}

score 3 · Answer 4 · answered Apr 07 '17 at 20:02

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]
})

score 3 · Answer 5 · answered May 18 '17 at 11:05

Finally got solution for this , check 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 { }

Only answer I've seen for getting multiple high-charts modules to work. Thanks! — Simon K, May 03 '18 at 23:02
I think its not working in angular 11. getting this below error: No provider for HighchartsStatic! — Subhabrata Banerjee, May 14 '21 at 13:26

Real time chart with angular2-highcharts

5 Answers5