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
    });
    
    

Comments are closed.