[Chartjs]-How to use chart.js with angular-chart using requirejs

by

5đź‘Ť

From the documentation – http://requirejs.org/docs/api.html

If a module ID has one of the following characteristics, the ID will
not be passed through the “baseUrl + paths” configuration, and just be
treated like a regular URL that is relative to the document:
• Ends in “.js”.
• Starts with a “/”.
• Contains an URL protocol, like “http:” or “https:”.

This will kick in for your chart.js module and RequireJS will attempt to load chart.js from the directory that contains the HTML page running RequireJS

Note – you should be able to see this in your Developer Tools > Network tab. Note that the request for chart.js doesn’t go to the path that you expect.

This seems like a bug (with angular-chart) – see a similar issue for typeahead.js – https://github.com/twitter/typeahead.js/issues/1211

There are a couple of ways to fix / workaround this

  1. Modify angular-chart code to make the expected module ID as something without a dot – say chartjs. Then change chart.js in your above configuration to chartjs. This would be correct way.

  2. Rename you chart.min.js file to chart.js and put it in the same folder as your html file running RequireJS. This would at best be a very very temporary fix.

  3. Set nodeIDCompat to true – this will make module ID something.js equivalent to something. Then change the module ID in your configuration to chart. So something like 

    require.config({
    nodeIdCompat: true,
    paths: {
        'chart': base_url + '/lib/Chart.min',
         ...

If you are using r.js to compress / consolidate, you might want to just test that too before settling on this workaround.

Leave a comment