How to use chart.js in Angular2?

Question

Surprisingly, despite chart.js being so popular, I didn't found neither documentation about its installation in angular2, neither a simple example of its usage there.

If in case usage in angular2 example here will be enough to understand, I can't say the same about simple install.

I have installed chart.js using

npm install chart.js --save

Next, I'm trying to import it with

import Chart from 'chart.js';

Immediately a problem - TS2307: Cannot find module 'chart.js' It supposed to be simple, but module isn't even recognized after installation.

I guess, having point in name is a bad thing, but is there a way to pass through it (using Gruntfile.js maybe)?

P.S I saw examples with ng2-charts and I considering to use it, but as I understand, it still requires chart.js + I don't know if it allows to create mix charts (didn't saw any example yet)

Answer 1

If you are using TypeScript you just need to install the @types package

npm install --save chart.js @types/chart.js

now TypeScript knows how to typecheck use of the package and the following will work.

import Chart = require('chart.js'); // For CommonJS users.

import Chart from 'chart.js'; // for SystemJS and/or Babel users.

const myChart = new Chart($('#chart1'), {});

Note, I show two imports in the example above. Remove whichever does not work at runtime but only keep one of them.

For SystemJS + npm, add the following to the map section of your systemjs.config.js

"chart.js": "npm:chart.js/dist/chart.js"

Optionally, if and only if you are using the ng2-charts wrapper, then run

npm install --save ng2-charts

And then add it you your primary NgModule decorator factory's, imports array

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

@NgModule({
  imports: [
    ChartsModule
  ]
}) export class AppModule {}

Answer 2

It's very simple to use in angular2...

1. Installation :

   npm install angular2-chartjs
   

2. Add ChartModule to your module :

   import { ChartModule } from 'angular2-chartjs';
   @NgModule({
     imports: [ ChartModule ]
   })
   
   export class AppModule {
   }
   

3. JavaScript

   type = 'line';
   data = {
     labels: ["January", "February", "March", "April", "May", "June", "July"],
     datasets: [{
       label: "My First dataset",
       data: [65, 59, 80, 81, 56, 55, 40]
     }]
   };
   options = {
     responsive: true,
     maintainAspectRatio: false
   };
   

4. HTML

   <chart [type]="type" [data]="data" [options]="options"></chart>
   

Link: https://github.com/emn178/angular2-chartjs "Documentation"

Enjoy Happy codeing. Hopefully that helps!