[Chartjs]-How to use chart.js in Angular2?

by

4👍

✅

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 {}

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!

1👍

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!

0👍

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

-1👍

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.

Leave a comment