angular2-highcharts error: “Chart is unknown chart type”

Question

I'm trying to display a simple highchart inside my Angular 2 app, but it always gives me the following error:

Here my app.module.ts:

import { ChartModule } from 'angular2-highcharts';

@NgModule({
  imports: [
    ChartModule.forRoot('highcharts')
  ]
})
export class AppModule {
}

My sistemjs.config.js:

    map: {
        'angular2-highcharts': 'npm:angular2-highcharts',
        'highcharts': 'npm:highcharts'
    },
    packages: {
        highcharts: {
            main: './highcharts.js',
            defaultExtension: 'js'
        },
        'angular2-highcharts': {
            main: './index.js',
            defaultExtension: 'js'
        }            
    }

And, inside my component:

import { Component } from '@angular/core';
import { ChartModule } from 'angular2-highcharts';

@Component({
  selector: 'highchart',
  template: '<chart [options]="options">'
})

constructor() {
    this.options = {
        title : { text : 'angular2-highcharts example' },
        series: [{
            name: 's1',
            data: [2,3,5,8,13],
            allowPointSelect: true
        },{
            name: 's2',
            data: [-2,-3,-5,-8,-13],
            allowPointSelect: true
        }]
    };

    console.log(this.options);
} 
options: Object;

Any ideas? Thanks a lot.

See the issue on angular2-highcharts github. It should help you solve the problem https://github.com/gevgeny/angular2-highcharts/issues/86 — morganfree, Mar 01 '17 at 17:56
No, unfortunately I think it refers to an old version of the component, it uses files that now don't exist inside angular2-highcharts installation. — B. Ciervo, Mar 06 '17 at 07:07
Hey @B.Ciervo, did u find solution for this issue. Am also stuck at same thing. It would be great if you can post any update on case u had found any solution. Thanks. — BeingSuman, Aug 11 '17 at 06:11
Hi, unfortunately I couldn't. In the end I moved to a different solution, using another highchart component. — B. Ciervo, Aug 21 '17 at 09:39

score 4 · Answer 1 · edited Aug 30 '18 at 07:56

I faced this issue a couple of days ago, and after referring to this thread i found a solution and this configuration works for me now:

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

declare var require: any;
export function highchartsFactory() {
  const hc = require('highcharts');
  const hm = require('highcharts/highcharts-more');
  const mr = require('highcharts/modules/solid-gauge');
  mr(hc);
  hm(hc);
  return hc;
  }

@NgModule({
  declarations: [
//===== your declarations =====
  ],
  imports: [
 //your other imports goes here
    ChartModule     //------------> important import just chart module
  ],
  providers: [{
    provide: HighchartsStatic,               //-----> and this too
    useFactory: highchartsFactory
  }],
  bootstrap: [AppComponent]
})
export class AppModule { }

angular2-highcharts error: “Chart is unknown chart type”

1 Answers1