I've created an angular directive for xCharts which is a nice js chart library http://tenxer.github.io/xcharts/. You can install it using bower, quite easy: https://github.com/radu-cigmaian/ng-xCharts
Highcharts is also a solution, but it is not free for comercial use.
I've seen some nice AngularJS charting solutions that make use of Highcharts. There's a highcharts-ng directive on GitHub to make AngularJS integration easier, and some examples on JSFiddle to give you a quick taste of what's possible.
You set up the chart on the JS side like this:
$scope.chart = {
options: {
chart: {
type: 'bar'
}
},
series: [{
data: [10, 15, 12, 8, 7]
}],
title: {
text: 'Hello'
},
loading: false
}
And then refer to it in the HTML like this:
<highchart id="chart1" config="chart"></highchart>
Usage/licensing warning: Highcharts is available for free under the Creative Commons license for non-commercial use. If you're looking for charting options in a for-profit/commercial scenario, you'll need to buy the product or look elsewhere.
To collect more useful resources here:
As mentioned before D3.js is definitely the best visualization library for charts. To use it in AngularJS I developed angular-chart. It is an easy to use directive which connects D3.js with the AngularJS 2-Way-DataBinding. This way the chart gets automatically updated whenever you change the configuration options and at the same time the charts saves its state (zoom level, ...) to make it available in the AngularJS world.
Check out the examples to get convinced.
The ZingChart library has an AngularJS directive that was built in-house. Features include:
Support from the development team
...
$scope.myJson = {
type : 'line',
series : [
{ values : [54,23,34,23,43] },{ values : [10,15,16,20,40] }
]
};
...
<zingchart id="myChart" zc-json="myJson" zc-height=500 zc-width=600></zingchart>
There is a full demo with code examples available.
Did you try D3.js? Here is a good example.
AngularJS charting plugin along with FusionCharts library to add interactive JavaScript graphs and charts to your web/mobile applications - with just a single directive. Link: http://www.fusioncharts.com/angularjs-charts/#/demos/ex1
Source: Stackoverflow.com