3

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)

Improve this question
2

5 Answers 5

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 {}
Improve this answer
Sign up to request clarification or add additional context in comments.

14 Comments

Hm... interesting... I will try it. Well, already can say that import Chart from 'chart.js'; not working because @types/chart.js/index has no default export, will try another one.
@OlegsJasjko SystemJS/Babel provide a synthetic default which TypeScript can be told about using --allowSynetheticDefaultImports but don't do that unless it works at runtime. If it doesn't work use import ... = require(...)
Now i got this beauty Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/chart.js... hm...
npm (mentioned in the question)
Worked only with dist/Chart.js .... package changes didn't helped at all. Thanks for your effort and wow... I just don't believe that nobody ever get those kind of problems at all (considering almost not existent info on this term)
|
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!

Improve this answer

1 Comment

How can you do a .update() like this? As the official documentation sais? chartjs.org/docs/latest/developers/updates.html
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!

Improve this answer

4 Comments

Hm, so its really much simpler to use ng2-charts and don't screw my own brains, but does free libraries support mix charts? (so far I only found that is is supported in highchart, but it is not a free one)
The charts that are currently supported by ng2-charts are line, bar, radar, pie, polarArea, and doughnut. That being said, you can try your hand at extending the extending the ng2-charts source. The mix charts will use effectively the same inputs.
Yeah I know, I mean, does it allow to combine those? Like line+bar for example? The reason I even decided to use chart.js Is because it allows those things.
That will load it as a global. This is not needed. Since you are using modules and chart.js is well behaved you are unnecessarily writing bad code.'
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

Improve this answer

Comments

-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.

Improve this answer

1 Comment

Don't do that. It is not portable and it pollutes the global object. If you are using a module loader/bundler, then do not use global variables if you do not need to, that is the point of modules.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.