javascript - How to use chart.js in Angular2? - Stack Overflow

admin管理员组

文章数量:1360375

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)

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)

• javascript
• angular
• typescript
• charts
• chart.js

Share Improve this question Follow edited May 9, 2017 at 21:47 Aluan Haddad 31.9k1010 gold badges8383 silver badges9595 bronze badges asked May 9, 2017 at 16:51 Olegs JasjkoOlegs Jasjko 2,09666 gold badges2828 silver badges5151 bronze badges 2

• Did you npm install --save @types/chart.js? – Aluan Haddad Commented May 9, 2017 at 17:14
• No, I did exactly as I writted in the question (or here chartjs/docs/#getting-started-installation) – Olegs Jasjko Commented May 9, 2017 at 17:15

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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 {}

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./emn178/angular2-chartjs "Documentation"

Enjoy Happy codeing. Hopefully that helps!

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 remend using a library such as the one your suggested as you're going to have access to ponents, directives, and emitted events that will be easier to work with in your ponents.

Hopefully that helps!

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

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 ponent based on chart.js, also had issues. This was the quickest way to get up and running. Make sure you reference the 'bundle' package.

本文标签： javascriptHow to use chartjs in Angular2Stack Overflow