Has anyone got ChartJS working on Angular2 RC5 ?

2 thoughts on “Has anyone got ChartJS working on Angular2 RC5 ?”

1. I use Chart.js with Angular 2 rc 5 without problem. The simplest way is a quick two step process as @sasos90 highlighted above. You could also choose to integrate Chart.js into your SystemJS packages as I did.

   • Add "chart.js": "2.2.1" in the dependencies section of packages.json
   • Run npm install
   • Add the library to SystemJS packages. Here is an excerpt of my systemjs.config.js:

       // map tells the System loader where to look for things
       var map = {
           'app':                        'dist',
           'rxjs':                       'node_modules/rxjs',
           '@angular':                   'node_modules/@angular',
           'chart.js':                   'node_modules/chart.js/dist',
       };
       // packages tells the System loader how to load when no filename and/or no extension
       var packages = {
           'app':                        { main: 'main.js',  defaultExtension: 'js' },
           'rxjs':                       { defaultExtension: 'js' },
           'chart.js':                   {main:'Chart.js', defaultExtension: 'js'},
       };
   

   • Since there are no typescript definition files with the library, the compiler will throw errors all over the place. So I added a file called custom.typings.d.ts. It contains the line below:

   declare var Chart:any;
   

   • And, I added a reference to that file, so typescript will see the declaration and not complain. In main.ts I have:

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

   • Once all that is setup: In any component that uses charts, import the library as you would any other class depenency with:

   import 'chart.js';
   

   Your paths may vary, but that’s basically my setup. You can then use the library as in the docs, by referring to the Chart object:

   this.chart = new Chart(this.ctx, {
       type: 'line',
       data: this.data,
       options: this.options
   });
   
   

2. Does anyone know how to do the exact same thing but with the webpack version of angular cli?

Comments are closed.