CODEWITHSUNDEEP
javascriptangulartypescriptchartschart.js
Olegs Jasjko
Olegs Jasjko

Reputation: 2096

How to use chart.js in Angular2?

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)

Upvotes: 3

Views: 7182

Answers (5)

Bhimbim
Bhimbim

Reputation: 1384

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

Upvotes: 0

Aluan Haddad
Aluan Haddad

Reputation: 31873

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

Upvotes: 4

Sayan
Sayan

Reputation: 522

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!

Upvotes: 2

Alexander Staroselsky
Alexander Staroselsky

Reputation: 38847

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!

Upvotes: 1

weePee
weePee

Reputation: 905

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.

Upvotes: -1

Related Questions