Best AngularJs Chart & Graph Directives Plugins

ngx-trend : Simple, elegant Spark lines for Angular

ngx-trend : Simple, elegant Spark lines for Angular

Angular trend is a simple, elegant trend graphs for Angular.

Features:

  • Simple. Integrate in seconds.
  • Scalable. Uses SVG for sharp, scalable graphs. Will fill the parent container, or you can provide a fixed size.
  • Beautiful. Built-in gradient support, and customizable smoothing.
  • Animatable. Support for on-mount animations where the trend graph draws from left to right.
  • Tiny. Zero-dependency, gzips to <3kb

ngx-charts : Angular2 and D3js Charting Framework

ngx-charts : Angular2 and D3js Charting Framework

ngx-charts is unique because we don’t merely wrap d3, nor any other chart engine for that matter. It is using Angular to render and animate the SVG elements with all of its binding and speed goodness, and uses d3 for the excellent math functions, scales, axis and shape generators, etc. By having Angular do all of the rendering it opens us up to endless possibilities the Angular platform provides such as AoT, Universal, etc.

Features:

  • Autoscaling
  • Timeline Filtering
  • Line Interpolation
  • Configurable Axis Labels
  • Legends (Labels & Gradient)
  • Advanced Label Positioning
  • Real-time data support
  • Advanced Tooltips
  • Data point Event Handlers

nvd3.js charts with AngularJs

nvd3.js charts with AngularJs

Angular.js Directives “are a way to teach HTML new tricks”. Directives are Angular’s way of extending HTML to create new elements and functionality.

Directives hide the complexity and code that is necessary to create d3.js, and nvd3.js charts, which makes adding charts to an Angular.js application quicker, and simpler than typical methods.

Flexible and extensible D3 directives for Angular 2

Flexible and extensible D3 directives for Angular 2

A set of composable and extensible Angular 2 directives for building SVGs with D3 declaritively. This library provides functionality for basic charts out of the box, but it can be easily extended to support building declarative syntaxes for just about any SVG generated by D3.

Angular Parallel Coordinates Chart

Angular Parallel Coordinates Chart

Parallel coordinates are useful for visualizing multivariate data. This is an Angular directive wrapper around parallel-coordinates-chart to allow for easy creation of charts.

Angular.js Directive for amCharts

Angular.js Directive for amCharts

An AngularJS directive for the amCharts library to create JavaScript/HTML5 charts for most of your needs, including serial (column, bar, line, area, step line, step without risers, smoothed line, candlestick and ohlc graphs), pie/donut, radar/polar, y/scatter/bubble, Funnel/Pyramid charts and Angular Gauges.

Angular-nvD3 : Re-usable Charting Library

Angular-nvD3 : Re-usable Charting Library

AngularJS directive for NVD3 reusable charting library (based on D3). 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.

Angular Progress Pie with SVG

Angular Progress Pie with SVG

A simple pie progress indicator for AngularJS. Written in pure Angular, using SVG to render the progress indicator. Tiny, simple and no external dependencies.

ng2-charts : Angular2 directives for Charts

ng2-charts : Angular2 directives for Charts

Beautiful charts for Angular2 based on Chart.js.

PrimeNG : UI Components for AngularJS 2

PrimeNG : UI Components for AngularJS 2

PrimeNG is a collection of rich UI components for AngularJS2. PrimeNG is a sibling of the popular JavaServer Faces Component Suite, PrimeFaces.