44

I've also been looking at charting solutions that will blend well with Angular.JS directives. I came across a few but got really confused. Does anyone have any suggestions for how to create interactive charts that are integrated with Angular.JS modules?

Wyetro
  • 8,439
  • 9
  • 46
  • 64
Hmahwish
  • 2,222
  • 8
  • 26
  • 45

7 Answers7

52

angular-charts is a library I wrote for creating charts with angular and D3.

It encapsulates basic charts that can be created using D3 in one angular directive. Also it offers features such as

  1. One click chart change;
  2. Auto tooltips;
  3. Auto adjustment to containers;
  4. Legends;
  5. Simple data format: only define what you on x and what you need on y;

There is a angular-charts demo available.

bruno
  • 2,213
  • 1
  • 19
  • 31
Chinmay Kulkarni
  • 536
  • 4
  • 2
  • 1
    looks good, but i guess that i miss something there. i cannot make it loaded. in the installation guide it is written "Dependencies: Angular and d3", and "Install using bower" - what does it mean? i have to include D3? and what is bower? – OhadR Jul 04 '14 at 14:41
  • 1
    i get this error: [$injector:unpr] Unknown provider: angularChartsProvider <- angularCharts – OhadR Jul 04 '14 at 19:37
  • 1
    You don't need to inject angularCharts into your controller. Just work with $scope to give it the data that the directive needs in the HTML. – David Brower Nov 20 '14 at 17:34
  • 2
    are there 2 versions of angular-charts - i see one that uses d3 and another that uses chart.js – Winter Mar 18 '15 at 14:14
  • @Winter, yes there are two different things. – Wyetro Jul 01 '15 at 19:08
  • DRAWBACK:Requirejs support is not available in angular-charts right now. – VBMali Jul 13 '15 at 11:15
  • 4
    Unfortunately the angular-charts community is pretty dead and issues do not get resolved. I was relying on it for a business application but may have to pull the plug and move to angular chart instead http://jtblin.github.io/angular-chart.js/ – Sealer_05 Aug 19 '15 at 19:12
  • Can you see my question please http://stackoverflow.com/questions/37256487/i-want-to-change-the-chart-for-each-city-or-subcity-selected – Abderrahim May 17 '16 at 11:40
  • Can the angular charts be used offline? – Sadiksha Gautam Apr 20 '17 at 12:06
16

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.

ajk
  • 4,473
  • 2
  • 19
  • 24
  • 3
    Author of highcharts-ng here. See a comprehensive demo at: http://pablojim.github.io/highcharts-ng/examples/example.html – Pablojim Jan 25 '14 at 20:34
16

The ZingChart library has an AngularJS directive that was built in-house. Features include:

  • Full access to the entire ZingChart library (all charts, maps, and features)
  • Takes advantage of Angular's 2-way data binding, making data and chart elements easy to update

  • 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.

Jailbot
  • 2,538
  • 19
  • 19
  • 1
    Seems like you're affiliated with ZingCharts. That would've been appropriate to state up front. – chribsen Jan 03 '17 at 21:33
  • At the time of posting, that was the directive I had experience with and felt comfortable recommending. In any case, thank you for your meaningful contribution to this thread! – Jailbot Jan 04 '17 at 22:21
6

Did you try D3.js? Here is a good example.

D.S
  • 1,110
  • 3
  • 11
  • 26
  • This gets upvoted? It is plain JS. There are wrappers, but this might be the best place to start - in the official ng-newsletter ... http://www.ng-newsletter.com/posts/d3-on-angular.html – Mawg says reinstate Monica Jun 09 '15 at 12:06
5

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.

radu.cigmaian
  • 46
  • 1
  • 4
3

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.

Max Klenk
  • 46
  • 2
2

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

Vishalika
  • 94
  • 4