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!

Philippe

Could You kindly provide some working example how to paint a simple chart this way? – Selfgovernment

@Selfgovernment there's a link in the answer to a complete working example. It's on my GitHub page – Philippe

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

Lattie

I've removed the inject line, import {Chart} from 'chart.js' & import 'chart.js' both give me the following error: ERROR [app-router] TypeError: Cannot read property 'length' of null(…) – Philippe

looks like I'm going to have to use aurelia-chart which is a wrapper for chart.jS – Philippe

Do you think you could me with getting aurelia charts working? I've made a simple github project that is verbatim from aurelia charts. I'm just not sure what I'm doing wrong – Philippe

Which specific repo did you use? I see two with similar names (one by grofit and one by SpoonX). Also, I suspect that in addition to aurelia-chart, you probably need to add chart.js to your dependencies in aurelia.json (as you originally did above) so that the Aurelia-Chart wrapper can find it. Then, include a [deps] line in Aurelia-Chart that shows it to depend on charts.js. – Lattie

You're a genius, brother! That's what I had to do. I got a working example up on github now. I'm getting a really weird error, in the console, but, it's working – Philippe

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.

Grishilda

Thanks for updating and keeping us appraised of how Aurelia has changed. I have a link in my answer to a working example, but, I'll try to update to include this as well Hopefully, it's simple :-) – Philippe

Yea I think prepending the minified version works until you add a dependency on moment.js for a different package which may require an updated version. Not sure what the debugging experience is like using the minified version. – Grishilda

Thanks. I am trying this but I get ------- File not found or not accessible ------ | Location: /opt/site/node_modules/chart.js/src/plugins.js | Requested by: /opt/site/src/resources/elements/energy_balance/energy_balance.js | Is this a package? Make sure that it is configured in aurelia.json and that it is not a Node.js package Any idea what has changed. Trying to import chartjs 2.6 – Emf