Installing Ng2-Charts for an Angular 4 Project

During a recent sprint I was assigned a task to come up with some summary dashboard pages for an Angular 4 app I was working on. The client is generally brief with specifications and trusts us to come up with a first cut which they can throw rocks at.  The initial deliverable included displaying some roll-up data for a few dashboard pages. Once I summarized the data, I laid it out primarily in panels with some fancy smancy icons and forwarded screenshots for feedback.

Stakeholder: “The information displayed is fine but if we could dress it up a little that would be great!”

Me: “Absolutely, maybe we can graph some of the summary data?”

Stakeholder: “Yes, how long would that take?”

Me: “I can get something to you before end of day, I’ll email you screenshots later”.

Background

Having worked with various graph libraries in Angular a number of times, I assumed I would fire up npm, add the package(s) I needed, format the data and have a bunch of graphs to screenshots in no time.  I started by checking out what charting libraries were available for the latest Angular.  Long story short, I went with ng2-charts based on Chart.js.  Installed the required packages and then began the somewhat frustrating unanticipated debugging process.

Setup

The basic installation instructions can be found on the github page at https://github.com/valor-software/ng2-charts.  For this article we installed ng2-charts version 1.5.0 and referenced chart.js version 2.5.0.

Chart.js

The instructions state:

Important: Embedding Chart.js in application is mandatory!
<script src=”node_modules/chart.js/src/chart.js”></script>.

Instead of referencing chart.js locally I decided to go the CDN route by adding the following to my html page:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>.

SystemJS

Next I needed to update the systemjs.config file for the library.  I did not need to add anything for Chart.js as we have used the CDN.  At this point we only need to include ng2-charts.  After adding the mapping and following various recommendations posted on github to get past a few errors I was left with:

(SystemJS) Unexpected token <
SyntaxError: Unexpected token <

I was finally able to get past this issue once I modified the packages section as follows:

Add ng2-charts to Systemjs.config
Add ng2-charts to Systemjs.config

Import ChartsModule

I came across various incarnations of the import from statement.  The documentation on the site also differed from below. I believe instructions were not up to date but below is what worked for me:

import { ChartsModule } from 'ng2-charts/ng2-charts';

Update Rollup-config

When running the AOT compilation and rollup I received the following error:

Issue: ‘ChartsModule’ is not exported by ‘node_modules\ng2-charts\charts\charts.js’

I have seen similar errors before and the issue is detailed at https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module. The fix was to add the following include and namedExports to the commonjs section of the rollup-config file

Add ng-2 charts to Rollup-config
Add ng-2 charts to Rollup-config

After performing the steps above, I was able to move onto actually implementing some graphs.  The library is easy to use and I was able to get feedback from the stakeholders a few hours after debugging the installation.  The time to get the library setup for our project was more than anticipated but figuring out each tweak was rewarding and I hope this helps someone else.



Leave a Reply