gevgeny / angular2-highcharts

:bar_chart: :chart_with_upwards_trend: Highcharts for your Angular project
MIT License
380 stars 113 forks source link

Error: “Chart is unknown chart type” #166

Open beabri opened 7 years ago

beabri commented 7 years ago

When I try to load a simple highchart in my Angular 2 app, it always gives me the following error:

schermata 2017-03-01 alle 12 43 21

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;
rupalpatel0008 commented 7 years ago

I also had same issue in my ionic 2 app. I used

ChartModule.forRoot(require('highcharts'))

instead of ChartModule.forRoot('highcharts') and it worked!

Robouste commented 7 years ago

I have the same problem and I use forRoot(require('highcharts'))

I tried setting the type in the options object but without success

     this.options = {
            chart: { 
                type: 'spline'
            },
            title : {
                text: 'testing chart'
            },
            series: [{
                data: [29.9, 71.5, 106.4, 129.2]
            }]
        };