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"]
  }
]