Documentation for using ChartJS plugins with different module loaders

[powerbuoy]

I've been using ChartJS in my ES6 (Aurelia) project for a few days, and today I wanted to install my first plugin.

I npm installed chartjs-plugin-deferred and import it in my project but for some reason I get errors in the console (the plugin still works however, which is a little puzzling): Uncaught TypeError: Cannot read property 'helpers' of undefined

(The code which throws the error is just var helpers = Chart.helpers).

I figured the Deferred plugin wasn't built with module loaders in mind so I tried with another plugin (Annotation and Draggable).

With those added to my package.json and build file the entire build fails completely.

Is there any documentation on how to include ChartJS and plugins using different loaders? Importing ChartJS itself works just fine (with import Chart from 'chart.js') but nothing else can even be added to the build it seems...

[etimberg]

I think the plugin still works because we always export the Chart global variable. Maybe some of the auto-run stuff doesn't work (not sure what uses Chart.helpers off the top of my head).

Both the package.json main files are the same for the plugins so I'm kinda surprised it doesn't work. Maybe there is some dependency that causes a problem. Are there any errors when importing the plugins?

[powerbuoy]

Yes,

When trying with draggable, for some reason the build system looks for its dependencies in my app root instead of inside node_modules;

Error: ENOENT: no such file or directory, open '/Users/powerbuoy/project-folder/src/d3-dispatch.js'

This is using Aurelia CLI's build system so it may be because of that, but I haven't faced this issue before and I use plenty of node modules.

Edit: I'm able to get the build to work by changing the plugin's main to dist/chartjs-plugin-draggable.min.js for some reason. But now I get errors in Chrome's console instead: Uncaught ReferenceError: Chart is not defined.

[etimberg]

That's confusing. I'm kinda surprised that just changing the main file works. 😕 I can see how it would cause the console errors though since the built version of the plugin will have no require or import statements so it never gets the version that was built into your app.

Is it possible to share the code from your project (or a similar sample) so that I can have a look at how the build is working?

[powerbuoy]

I think it would be easier to try with a completely new Aurelia CLI project;

1. npm install -g aurelia-cli

2. au new

3. Use the defaults

4. cd project-folder

5. Make sure the project works: au run --watch

6. Check localhost:9000

7. npm install -S chart.js

8. npm install -S chartjs-plugin-deferred

9. Now you need to add them to Aurelia's bundle as well;

10. Open aurelia_project/aurelia.json

11. Find the build.dependencies array

12. Add both ChartJS and the plugin:

    // Note that because ChartJS contains a "." we need to rename it for the build to work (this is another Aurelia CLI thing)
    {
    	"name": "chartjs",
    	"path": "../node_modules/chart.js/dist/Chart.min"
    },
    
    // The plugin does not contain a "." so no need to rename
    "chartjs-plugin-deferred",
    
    // Rest of dependencies...
    "aurelia-binding",
    "aurelia-bootstrapper",
    

13. Try the project again; au run --watch

14. Go to localhost:9000and you should get the cannot read helpers of undefined error

If you replace the deferred plugin with annotations or draggable you won't even be able to run au run (the build will fail)

[etimberg]

Should be covered by https://www.chartjs.org/docs/master/getting-started/integration. I am currently using v3.0.0-beta.3 in a react app without trouble.