Comparison of AngularJS directives for charts in front end app development

In this article we'll compare AngularJS directives for charts that we use in front end app development. There are lots of different JavaScript charting frameworks, so it is really difficult to find the best one that fits your requirements. Because our front-end is mostly built in AngularJS, it is essential that we can use one of many existing AngularJS Directives for charts, in order to show elements like user activities, project health and so on.

First of all, we specified the following requirements for our new Angular Chart Directive:

• free software license
• easy-to-use
• quite popular and stable (measured by github stars/forks/contributors and issues)
• possible to use CSS for bars / pies etc. (so we can reuse our defined SCSS color variables and also make the charts responsive) —> SVG over HTML5 Canvas
• Bower compatibility
• Types: Pie, Area and Multi Bar Charts (stacked or grouped) etc.
• Features: Legends, Labels/Tooltips on MouseOver

Based on the requirements I picked 4 different modules of AngularJS Directives and will now go into them quickly in more detail.

AngularJS Directives for charts

1. tc-angular-chartjs (Chart.js)

This module offers 6 different directives:

• tc-chartjs, tc-chartjs-line, tc-chartjs-bar, tc-chartjs-radar, tc-chartjs-polararea, tc-chartjs-pie, tc-chartjs-doughnut

Just place one of these directives on a canvas element to create a Chart.js chart. You will also want to give the chart some data and options. These can be provided by assigning $scope variables to chart-options and chart-data attributes on the same canvas element.

[gist id=8f4e26ad5963a7d8c13e]

Conclusion: For simple charts this directive is really a charm to use, but it uses HTML5 Canvas so it is not possible to define CSS for coloring bars. Also missing is a tooltip on mouseover, where you can see the specific data per item. You can't define an advanced chart, like a Multi Bar Chart.

2. angular-charts (D3.js)

This angular module offers different chart directives for commonly used D3 charts:

• Pie, Bar, Line, Point, Area

Features include auto tooltips, responsiveness, animations and callback events (e.g. show something when the user hovers the chart). When you try out angular-charts on plunkr, you will see that it is also very easy to use.

Conclusion: Fulfils nearly all requirements, but it is not possible to use stacked or grouped MultiBar Charts, which is necessary if you have lots of data.

3. angularjs-nvd3-directives (nvd3.js based on D3)

This module uses nvd3.js (reusable charting library based on D3) to build powerful charts. The charts can be more advanced so it's more difficult to use a given directive.

[gist id=65c63923f4ead9e53f06]

It is possible to create and configure a multi bar chart. You can also switch between the two config options ‘grouped’ and ‘stacked’. This shows a little animation, and it may help the user to understand the data. You can find an example here: http://cmaurer.github.io/angularjs-nvd3-directives/multi.bar.chart.html

An additional advantage is the popularity on github. The first release was in October 2013 and at this moment the github repository has 465 stars and 25 contributors.

Conclusion: It is not that easy to use, but you can create more advanced charts. Apart from this issue, it fulfils all defined requirements!

4. angular-nvd3 (nvd3.js based on D3)

This angular directive is very similar to the one described beforehand (angularjs-nvd3-directives). But it offers just one chart directive instead of different chart type directives. And you can't define a simple boolean configuration value as HTML attribute. This was possible in all other modules described.

[gist id=2b15e49b0ea69687be44]

Compared to angularjs-nvd3-directives angular-nvd3 is at an earlier stage of development - the first release was in April 2014, the github repository has 30 stars and 3 contributors.

Conclusion: It is not that easy to use, you have less HTML code and lots of JavaScript code when configuring a chart. You need to define everything in the JavaScript code - also the type.

Our winner among AngularJS Directives is … angularjs-nvd3-directives

We chose angular-nvd3-directives because it seems quite stable compared to the smaller angular-nvd3 module. You can do advanced bar charts with animation and control options (grouped and stacked). The directive will create a SVG which we can style with CSS. We have overwritten some CSS for the pie charts to show two slices, one in green and one in transparent:

[gist id=927747b9f7a1e273da3e]

I hope this article will help you make the right decision finding your chart module among AngularJS directives for your special needs. If you want to see some of the results of my coding, check out Lingohub for your next app localization project.