Chart is unknown chart type

[graphicsxp]

After going through a lot of troubles trying to import the angular2-highcharts module in my ionic2 application, I'm now having this error at runtime:

'Chart is unknown chart type'

basically it is raised from initChart.js :

 if (!highchartsService.Highcharts[type]) {
    throw new Error(type + " is unknown chart type.");
}

the highchartsService is an empty object.

Any idea why ?

[Fank]

Duplicate of #83

[graphicsxp]

well, I don't use systemjs, and I'm doing everything like in the sample (code-wise). If anyone has a solution to make this working with ionic2RC, I'd appreciate some help.

[graphicsxp]

besides, I believe the module is loaded since the error is raised by the module itself....

[graphicsxp]

well for the record, I've solved it:

 <script src="build/chart.js"></script> 

needs to be before

 <script src="build/main.js"></script>

in index.html

[easierbycode]

@graphicsxp did you get this working for angular2-highcharts or @progress/kendo-angular-charts?

[graphicsxp]

angular2-highcharts.

I'm testing kendo-angular-charts right now actually. It works great when I run it with liveserver but no luck with building for android using aot compiler. This is because kendo-angular is missing the metadata.json file required by aot angular2 compiler. Can't change that since kendo is not opensource....

[easierbycode]

@graphicsxp I finally got it working too!

there is no chart.js on index.html when using angular2-highcharts w/ ionic2RC, so my solution was to modify rollup.config.js:

commonjs({
      include: [
        'node_modules/angular2-highcharts/**',
        'node_modules/highcharts/highstock.src.js',
        'node_modules/highcharts/highcharts-more.src.js'
      ],
      namedExports: {
        'node_modules/angular2-highcharts/index.js': ['ChartModule', 'Highcharts'],
        'node_modules/highcharts/highstock.src.js': ['Highcharts'],
        'node_modules/highcharts/highcharts-more.src.js': ['HighchartsMore']
      }
    })

.. then, to fix build I added this at the bottom of @types/highcharts/index.d.ts:

declare var HighchartsMore: (H: HighchartsStatic) => HighchartsStatic;

declare module "highcharts/highcharts-more.src" {
    export = HighchartsMore;
}

Here's the component code:

import { Highcharts } from 'angular2-highcharts';
import HighchartsMore from 'highcharts/highcharts-more.src';

HighchartsMore( Highcharts );

[beabri]

Hi all, it always gives me the 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;

What am I missing?

[HuangJian]

@beabri

I guess I had a similar issue like yours and finally found a solution. Just post it here in case it could help.

The problem is that the angular2-highcharts library needs to inject a static Highcharts instance to the HighchartsService class. Since we are importing the Highcharts library externally from SystemJS (mine is Webpack), we need to pass the Highcharts variable/instance to the ChartModule module.

So, please try to change your app.module.ts as follow:

import { ChartModule } from 'angular2-highcharts';
import { Highcharts } from 'highcharts';

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

[jmerazhn]

Hi @HuangJian I have problems importing the Highcharts:

ERROR in C:/Users/Josue Meraz/Documents/2017/Udemy/Angular 2 - De cero a experto/Practicas/1. HighchartsApp/src/app/app.module.ts (6,10): Module '"C:/Users/Josue Meraz/Documents/2017/Udemy/Angular 2 - De cero a experto/Practicas/1. HighchartsApp/node_modules/@types/highcharts/index"' has no exported member 'Highcharts'.

[howtimeflies-io]

Hi @jmerazhn

You don't need to import the Highcharts variable into your project, importing ChartModule is enough (it will load the Highcharts dependency automatically)

import { ChartModule } from 'angular2-highcharts';

---

If you need the Highcharts variable, please try it this way:

declare let require: any;
const Highcharts = require('../node_modules/highcharts/highcharts.src'); // please modify the relative path as needed

[jmerazhn]

Hi @howtimeflies-io I am sorry!

I still have a problem, I do not know what I'm doing wrong.

[howtimeflies-io]

Hi @jmerazhn

It seems you are not loading the Highcharts library externally. So angular2-highcharts should take care of it for you.

Is there any error when following the angular2-highcharts instruction?

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ChartModule } from 'angular2-highcharts';
import { App } from './App';

@NgModule({
    imports: [
      BrowserModule, 
      ChartModule.forRoot(require('highcharts'))
    ],
    declarations: [App],
    bootstrap: [App]
})
export class AppModule {}

[jmerazhn]

@howtimeflies-io Yes, I have the following problem. He says he does not recognize 'require'.

[howtimeflies-io]

@jmerazhn

Just add a single line bellow the imports.

declare let require: any;

[jmerazhn]

Thank you @howtimeflies-io It's just what was missing! Now what I am going to try is to feed the data from a service rest.

[jmerazhn]

Hi @howtimeflies-io When I am doing the project build, it sends me an error with the require variable. How do you think it can be solved?

[howtimeflies-io]

Hi @jmerazhn

I have no idea how to fix this issue since it did not happen in my project. If you can make to tiny project to showcase this issue, maybe we can take some time to help.

[anandraj9497]

I am facing the same problem. Can't bind to 'options' since it isn't a known property of 'chart'. ("

Could any one please help me to solve this error?

[pscanlon1]

I solved this with doing following

declare let require: any; // outside of NgModule()

ChartModule.forRoot(require('highcharts'))

[lomo1]

i am using ng-cli 1.6 and have same issue now, any one can help it ?