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

| improve this question | |
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.

| improve this answer | |
  • 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 says reinstate Monica 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.

| improve this answer | |
  • 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 says reinstate Monica 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 says reinstate Monica 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.

| improve this answer | |
  • 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 says reinstate Monica 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.

| improve this answer | |

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.