use Chart.js in Aurelia

Question

I'd like to use chart.js in an aurelia project, but I'm getting errors. How do I add 3rd party node packages to an aurelia app?

I'm using aurelia-cli, BTW

Here's what I've done

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 then add the line

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

But, I get the error:

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

I've tried various things like injecting the Chart into the 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'S THE SOLUTION

You can checkout a working example here . Initially, I thought you had to use the aurelia-chart module, however, it's very difficult to use, and so, I'd recommend you just use Chart.JS package instead. Here's how to incorporate the chart.js module into your Aurelia app:

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-view file), add the line

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

For, example, if you wanted to display a chart on the home page:

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

export class App {
  ...
}

And that's it!

Answer 1

1. Problem with require

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

2. Alternate import syntax

Skip the inject lines in app.js , but try one of the following (try them one at a time) in either app.js or in each module you'll be using Chart. One of these imports is likely to work.

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

3. Legacy prepend

If none of the above works, import it as a legacy repo using the prepend section of aurelia.json (before the dependencies section) like this:

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

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

Since you ended up going with aurelia-chart (by grofit), here's 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 this working with an aurelia cli project and it required some extra modifications.

I used au install chart.js but there is an open issue that states it is not intelligent enough yet to add references to package dependencies.

To make things work I added the following to my 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"
}

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

In the chart.js docs they mention including the minified version can cause issues if your project already depends on the moment library.

The bundled version includes Moment.js built into the same file. This version should be used if you wish to use time axes and want a single file to include. Do not use this build if your application already includes Moment.js. If you do, Moment.js will be included twice, increasing the page load time and potentially introducing version issues.

This solution may help if you are in that position.