15+ Top Angular JS Graphs and Charts Directive

Angularjs is great javascript framework. Here we feature good examples of Angular Graphs and Charts Directive. JavaScript library for creating beautiful charts in AngularJS applications.

In this post provides for all chart types Line Charts, Bar Charts, Radar Charts, Polar Area Charts, Pie Charts, Doughnut Charts,

1 – Angular Smart Chartist

Angular Smart Chartist

A handy direcitve for chartist, by which developer can build up their application with a beautiful chart in it

Demo Download

2 – n3-line-chart

n3-line-chart

n3-line-chart is an easy-to-use JavaScript library for creating beautiful charts in AngularJS applications and it is built on top of D3.js.

Demo Download

3 – AngularJS directive for Highcharts

AngularJS directive for Highcharts

A simple Angularjs directive for Highcharts.

Demo Download

4 – Angular-FusionCharts

Use this AngularJS charts plugin to add interactive charts to your web and mobile applications using just a single directive. Choose from 90+ charts & 900+ maps from FusionCharts’ core JavaScript charts library.

You can access all the rich charting features like events, annotations, macros, themes, image-export etc. to make your visualizations stand-out.

Demo Download

5 – AngularJS Directive For NVD3 Reusable Charting Library

AngularJS-Directive-For-NVD3-Reusable-Charting-Library

This thing is designed to make it easier to work with nvd3.js re-usable charting library. This directive allows you to easily customize your charts via JSON API.

The key feature is that the original hierarchical structure of nvd3 models is completely preserved in directive JSON structure. This means that while you creating a complex chart that containing multiple elementary chart models (such as line, bar,axis, …), you can in turn customize the properties of each internal elementary models as well as the global charting properties the way you want. This can be done as usual, but it becomes quite easily to customize while applying JSON approach to.

Demo Download

 

6 – AngularJS using Chart.js

AngularJS-using-Chartjs

Beautiful, reactive, responsive charts for Angular.JS using Chart.js.

Demo Download

 

7 – Angular Google Chart

Angular-Google-Chart

Google Chart Tools AngularJS Directive Module

Demo Download

 

8 – tc-angular-chartjs

tc-angular-chartjs

Add Chart.js to your angular applications

tc-angular-chartjs provides you with directives for all chartjs chart types.

  • Line Charts
  • Bar Charts
  • Radar Charts
  • Polar Area Charts
  • Pie Charts
  • Doughnut Charts

Demo Download

 

9 – Angular-chartist.js

Angular directive for Chartist.js

Download

 

10 – Angular Morris Chart

Angular-Morris-Chart

A module with directives to easy use of morris with angular

Demo Download

 

11 – Angular Chart

angular-chart is a AngularJS directive, which is build on top of C3.js a d3-based chart library.

Demo Download

 

12 – ZingChart-AngularJS

An AngularJS directive for ZingChart to make your charts work dynamically with your data.

Demo Download

 

13 – Lightweight Gauge / Doughnut Chart For AngularJS

Doughnut-Chart-For-AngularJS

This is a small Angular-Directive for plain SVG gauges/doughnut charts.

Demo Download

 

14 – Nested Pie Chart Control With Angular

Nested-Pie-Chart-Control-With-Angular

A nested pie chart control with angular bound data composed as a single SVG

Demo Download

 

15 – Angular Flow Charts

Real-time charts for IoT using angular and flowthings.io. Uses the official flowthings angular client for communication with flowthings.io server.

Demo Download

16 – viz

viz-angularjs-chart

Graphs & visualization widgets built using AngularJS and D3.js

Demo Download

Posted on in and tagged