Use Chart.js in Aurelia

Question

I would like to use chart.js in aurelia project, but I am getting errors. How to add third-party node packages to aurelia app?

I am using aurelia-cli, BTW

Here is what i did

npm install --save chart.js 

In aurelia.json I added the following

 "dependencies": [ ..., { "name": "chart.js", "path": "../node_modules/chart.js/dist", "main": "Chart.min.js" } ] 

In app.html I am adding a line

 <require from="chart.js"></require> 

But I get an error message:

 vendor-bundle.js:1399 Unhandled rejection Error: Load timeout for modules: template-registry-entry!chart.html,text!chart.html 

I tried different things, for example, inserting a chart in app.html

 // DIDN'T WORK :-( // app.js import {inject} from 'aurelia-framework'; import {Chart} from 'chart.js'; export class App { static inject() { return [Chart]}; constructor() { this.message = 'Hello World!'; } } 

And then, in app.html, I added the following require statement

 <require from="Chart"></require> 

---

HERE DECISION

You can check the working example here . Initially, I thought you needed to use the aurelia-chart module, however it is very difficult to use, and therefore I would recommend that you use the Chart.JS package Chart.JS . Here's how to include the chart.js module in your Aurelia application:

 npm install --save chart.js 

In aurelia.json add the following line to the prepend section

 "prepend": [ ..., "node_modules/chart.js/dist/Chart.min.js" ], 

In the app.js file (or any other model file) add the line

 import {Chart} from 'node_modules/chart.js/dist/Chart.js'; 

For example, if you want to display a chart on the main page:

 // app.js import {Chart} from 'node_modules/chart.js/dist/Chart.js'; export class App { ... } 

What is it!

Answer 1

1. Problem with the requirement

First of all, do not use <require from="Chart"></require> in your app.html project. This is the source of your error message because it is trying to load the Aurelia module, and chart.js is not an Aurelia module (view / viewmodel) in your source code.

2. Alternative Import Syntax

Skip the inject lines in app.js , but try to do one of the following (try them one at a time) either in app.js or in each module you will use a diagram. One of these types of imports is likely to work.

 import { Chart } from 'chart.js'; import * from 'chart.js'; import 'chart.js'; 

3. Legacy preend

If none of the above works, import it as an obsolete repo using the prepend aurelia.json section (before the dependencies section) as follows:

 "prepend": [ // probably a couple other things already listed here... "node_modules/chart.js/dist/Chart.min.js" ], 

Update for Aurelia-Chart: (added for any subsequent viewers)

Since you have finished working with the aurelia (by grofit) diagram, here is the dependency code for aurelia.json :

 "dependencies": [ ..., { "name": "chart.js", "path": "../node_modules/chart.js/dist", "main": "Chart.min.js" }, { "name": "aurelia-chart", "path": "../node_modules/aurelia-chart/dist/amd", "main": "index", "deps": ["chart.js"] } ] 

Answer 2

I just got a job with the aurelia cli project and it required additional changes.

I used au install chart.js , but there is an open problem that claims to be not smart enough to add links to package dependencies.

To get the job done, I added the following aurelia.json dependencies:

 "moment", "chartjs-color", "chartjs-color-string", { "name": "chart.js", "main": "src/chart.js", "path": "../node_modules/chart.js", "deps": ["chartjs-color", "moment"] }, { "name": "color-convert", "path": "../node_modules/color-convert", "main": "index" }, { "name": "color-name", "path": "../node_modules/color-name", "main": "index" } 

Then I was able to import { Chart } from 'chart.js'; in my view model and run the chart.js quick start example from the viewtodel attached lifecycle method.

The chart.js documents that are mentioned, including the mini version, may encounter problems if your project already depends on the library of the moment.

The package includes Moment.js, built into the same file. This version should be used if you want to use time axes and want to include one file. Do not use this assembly if your application already has Moment.js. If you do this, Moment.js will be enabled twice, increasing the page load time and potentially introducing version problems.

This solution may help if you are in this position.