Chart.js: Has anyone got ChartJS working on Angular2 RC5 ?

[Davy-F]

I've upgraded my version of Angular2 from the Beta to RC5 and can't get the charts to load.
Not getting any errors, just a blank chart.

Is anyone else on this version with working charts?

[Davy-F]

One thing worth noting is that AngularJS requires rxjs v5.0.0-beta.6, whereas the latest version of ChartJS requires rxjs v5.0.0-beta.11. Shouldn't ChartJS always match the dependencies of Angular?

[etimberg]

Chart.js itself has no dependency on rxjs. We don't maintain the angular bindings.

[Davy-F]

Hmm, something must definitely depend on rxjs. When installing chartJS via npm I got the following message:

C:\Development\Folder>npm install chart.js --save
[email protected] C:\Development\Folder
+-- [email protected]
`-- UNMET PEER DEPENDENCY [email protected]

To get around this I put [email protected] in my package.json and downloaded the chart.min.js file manually. The charts now work though which is the good thing.

[etimberg]

Hmm, I quickly looked back through our dependencies and I didn't see rxjs mentioned in package.json for moment, color, color-string, color-name, color-convert.

[Davy-F]

We looked at the packages.json too and Couldn't see any mention of it. Strange.

[sasos90]

We are using Angular RC5. Just include it in index.html, declare it as "declare Chart: any" and use it as any object..
It doesn't work properly with TypeScript from my point of view.

[RoxKilly]

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

[panic175]

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

[etimberg]

Closing since the original question was answered