Clever Geek Handbook

How do I use chartjs in Angular2?

Surprisingly, despite the fact that chart.js was so popular, I did not find any documentation on installing it in angular2, nor a simple example of using it there.

If in the case of use in angular2 there is enough here to figure it out, I cannot say the same for a simple installation.

I installed chart.js using

npm install chart.js --save

Then I try to import it with

import Chart from 'chart.js';

Immediately problem - TS2307: Cannot find module 'chart.js'

It should be simple, but the module is not even recognized after installation.

I guess having a period in the name is bad, but is there a way to go through it (perhaps using Gruntfile.js)?

PS I saw examples with ng2-charts

and I decided to use it, but as I understand it still needs chart.js +. I don't know if it allows mixing diagrams to be created (haven't seen any example yet)

+3


source to share


4 answers


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 use typecheck to consume 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. The example above shows two imports. Remove what doesn't work at runtime, but keep only one of them.

For SystemJS + npm add the following to map

your systemjs.config.js section



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

Optional, if and only if you are using ng2 charting wrapper, run

npm install --save ng2-charts

And then add your main NgModule

factory decorator to it, an imports

array

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

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


source


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

  • Installation:

    npm install angular2-chartjs

  • Add ChartModule to your module:

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

export class AppModule {
}

  • 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
};

  • Html

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


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

Enjoy happy coding. Hope this helps!

+2


source


For an Angular CLI project, you want to add a dependency chart.js

in .angular-cli.json

in an array property scripts

, for example:

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

Otherwise, you can import the library using the syntax like this:

import * as Chart from 'chart.js'

That being said, I would recommend using a library such as the one you suggested, since you will have access to components, directives and fired events that will be easier for you to work with in your components.

Hope this helps!

+1


source


A simple workaround is to add this parameter to index.html:

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

I am using PrimeNG which has a chart.js based chart component, had problems as well. It was the fastest way to get up and work. Make sure to reference the "bundle".

-2


source






More articles:


All Articles