Chartjs-Chart.js causes Angular 2 error

by

2👍

I use Chart.js in an Angular 2 app, and it works without having to add chartjs-color paths to my system.config.js

First:

  • npm --version

If the version is not at least 3.x.x, upgrade to the latest Node/npm, then:

  • npm --version and see that it’s 3+
  • npm install
  • npm rebuild

Check again. If you still get the error in the OP:

  • npm install chartjs-color chartjs-color-string

More info about my setup:

This is my working Chart.js configuration in systemjs.config.js

paths: {'npm:' : 'node_modules/'},

map: {'chart.js' : 'npm:chart.js'},

packages: { 'chart.js' : { main:'./dist/Chart.js', defaultExtension: 'js'} }

This is how I import the library in my custom directive:

import 'chart.js';

From there, I can use the Chart object. To prevent Typescript from raising errors, I also have a custom.typings.d.ts file which contains:

declare var Chart:any;

This definition file holds a few custom definitions relevant to my app. I added a reference to these definitions in main.ts, with:

///<reference path="relative/path/to/custom.typings.d.ts"/>

0👍

you need to import ChartsModule as shown below in @NgModule,

import { ChartsModule } from 'ng2-charts/ng2-charts';

// In your App's module:
@NgModule({
  imports: [
     ChartsModule
  ]
  ...
})

More Info : https://github.com/valor-software/ng2-charts/blob/master/demo/index.ts

NOTE : change 'chart.js':'npm:chart.js' to appropriate name like ng2-charts for simplicity as shown here in systemjs.config.js : http://plnkr.co/edit/7fGsiuRjcF0M0Ffeoml2?p=preview.

Leave a comment