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)?

PS 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!

Answer 3

For an Angular CLI project, you'd want to add the chart.js dependency in the .angular-cli.json in the scripts array property like this:

"scripts": [
    "../node_modules/chart.js/dist/Chart.bundle.min.js"
]

Otherwise you can import the library using syntax as follows:

import * as Chart from 'chart.js'

That being said, I'd recommend using a library such as the one your suggested as you're going to have access to components, directives, and emitted events that will be easier to work with in your components.

Hopefully that helps!

Answer 4

Change your import syntaxt to this :

import Chart from "chart.js/dist/Chart.bundle.min.js";

make sure you already did

npm install chart.js --save

if youalready did, in you node modules supposed to have nodemodules/chart.js

Answer 5

Simple workaround is to add this to index.html:

<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>

I actually use PrimeNG which have a charts component based on chart.js, also had issues. This was the quickest way to get up and running. Make sure you reference the 'bundle' package.