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

AngularJS Directives for charts

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.

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.

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.