5

I'm looking for a javascript Charts / Graphs Library that plays well with AngularJS. It doesn't have to be free.

I intend to implement mainly line graphs, however with some sophistication so they should be highly customizable (e.g. synchronized graphs, multiple y axes, include both lines and separate points in the same graph, handle up to 10k points...)

Highcharts seems like a very good library but it's jquery based. It has this wrapper: https://github.com/pablojim/highcharts-ng, but it says there that "Due to many equality checks the directive maybe slow with large datasets".

Other options that I'm considering:

  • ZingChart
  • FusionCharts
  • Google Charts
  • NVD3
  • nv-charts

I'm open to more options...

  • 1
    How about jtblin.github.io/angular-chart.js? – Tom Jul 29 '15 at 14:33
  • Thanks! Chart.js does look like an eye-candy lib, but their API seems very thin compared to the rich possibilities other libs expose. I know that in the feature I'll need something complex that they don't support. – Erez Cohen Jul 29 '15 at 20:29
  • D3js is probably the most powerful/popular free JS library, so a wrapper for that would be ideal (github.com/mbostock/d3/wiki/Gallery). I found dashingd3js.com/d3-resources/d3-and-angular Let's look for others. And please see also my question softwarerecs.stackexchange.com/questions/21614/… – Mawg Jul 30 '15 at 10:03
  • D3 is indeed powerful, but you practically have to draw almost everything yourself. For my needs there's no reason not to use an existing library - although I need many features, there's no feature that is not implemented one way or another by existing libraries. – Erez Cohen Jul 30 '15 at 14:16
  • I decided to start off with a Highcharts PoC. Will post here on the results. – Erez Cohen Jul 30 '15 at 14:17
5

ZingChart does have it's own AngularJS directive : https://github.com/zingchart/ZingChart-AngularJS

It has three avenues of injecting data into a chart, each with their own performance cost and functionality benefit. I outlined each of them here : http://www.zingchart.com/blog/2015/03/05/zingchart-angularjs/ .

I'm on the ZingChart team and happened to create the directive so feel free to reach out if you have any questions.

  • Since the question is tagged gratis, I have to point out that Zing is only free if you brand your charts, which not everyone may want to. More at zingchart.com/buy – Mawg Dec 9 '15 at 13:02
1

Essential Chart for JavaScript is also another option to consider. Simple sample application:link.

The whole suite of controls is available for free through the community license program if you qualify. Note: I work for Syncfusion.

  • Since you work for Syncfusion, can you tell us how to use the library with AngularJs (which, after all, is what the question is about). Thanks – Mawg Dec 9 '15 at 13:06
  • 1
    Please refer to this documentation link for using the Chart with Angular JS. – Davis Jebaraj Dec 17 '15 at 19:59
  • Thanks. Your product looks great and I am very impressed by the extremely generous community license : "Who is eligible? Individual developers or up to five users at companies with annual gross revenue below $1 million USD" – Mawg Dec 18 '15 at 8:30
1

In my project I used D3.js and it worked very well with AngularJS (v 1.2/1.3).

I created some new directives related to kind of charts I needed. I had no problems.

EDIT:

  • it has line graphs
  • handles a lot of objects
  • free

D3.js creates an SVG so the library handles all that SVG can.

  • 1
    I don't know of a better, more popular, free JS charting library than D3.js That said, the wrappers available do not cover all chart types, so you might have to do some work there. I just started an AngularJs project and intend to use D3.js so would be grateful if jsDoggy would post some links to how to create new directives for D3.js Thanx – Mawg Dec 9 '15 at 13:05
  • 1
    Of course, I have also some code to "inject" a D3.js. When I will find a snippet, I'll post it here. Moreover, as @Mawg said, I'll show some example directive. EDIT: it would be useful: ng-newsletter.com/posts/d3-on-angular.html – jsDoggy Dec 9 '15 at 13:08
0

FusionCharts would be the best suited Javascript library as per your requirements. The library has the FusionCharts-Angular Directive, which will make creating charts in your Angular app a breeze. The library also allows you to customize all the chart attributes to make your chart look the way you want.

You can also read this quick guide to create charts in Angular.

Would be happy to help if you need any further advice.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.