Top 20 Angular 2 Charts and Graphs

This is what I think are the Top 20 Angular 2 Charts and Graphs available to developers at the moment with Angular 2 version 2.2 (release candidates RC4 RC5). The below controllers, filters, directives, services, providers, modules, packages aim to give you a quick start include dynamic graphs base-charts, interactive charts, and all the main chart types line, bar, radar, pie, polarArea & doughnuts into your angularjs2 app. Some of them have prerequisites such as module dependencies, TypeScript, ES6 and JSON data to load the graphs into the HTML via AJAX to keep your loading times fast.

If your chart is not working in Angular2 then check out this page which has the Top 5 AngularJS Graphs and Charts which included popular chart libraries like D3 library components and Highcharts.

1. nvD3 Angular Charts and Graphs

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.

Article Code Demo

2. Chart.js Angular 2 (ng2-charts)

Beautiful charts for Angular2 based on Chart.js

Code Demo Demo 2

3. Highcharts Angular 2

Angular2 charting components based on Highcharts.

Code Demo

4. Primefaces BarChart

A bar chart or bar graph is a chart that presents Grouped data with rectangular bars with lengths proportional to the values that they represent.

Demo

5. Fusion Charts Angular2

Easy to use AngularJS charts plugin for adding interactive charts to your website.

Demo

6. ZingChart Angular 2 Chart

Building gorgeous and interactive Angular 2 charts is easy with ZingChart

Article Demo

7. D3.js Angular 2 Graph Integration

D3 + Angular2 Composable Re-usable Charting Framework

Article Code

8.Google Charts in Angular2

Angular 2 google chart.

Code

9. Fusion Charts Component with Angular 2

Code demonstrating how to create a simple chart component in Angular 2 using the FusionCharts library and plain JavaScript.

Article Code Demo

10. Vaadin Charts with Angular 2

While Vaadin Charts is built using Polymer, it also contains directives to enable seamless usage within Angular 2 applications.

Article

11. Kendo UI Graph Components for Angular 2

The Kendo UI Chart is an Angular component that renders high-quality data visualizations and provides a full spectrum of configuration options.

Article and Demo

12. Pie Charts and Angular 2

Simple pie chart using Angular 2.

Demo Demo 2

13. RadialProgressChart Angular2

Radial Progress Chart using Angular 2

Demo

14. Ionic 2 App interactive charts

In Ionic 2, pages can be added to the Ionic app using the @Page decorator (an Ionic module based on Angular 2 components), which has access to the complete Ionic functionality. A bare-minimum page requires a template HTML file (which contains the markup), and a JavaScript file (containing the logic needed). You can find more details about Ionic pages here.

Code Article

15. Angular 1 Parallel Coordinates

Angular directive for creating parallel coordinates charts using D3

Code Demo

16. Angular 1 PieMix

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

Code Demo

more coming soon…

More references and useful resources:

• Typescript Angular 2 Charts Article
• Flotcharts with JavaScript
• fFiles JS Chart HTML 50 Demos

Chart Types Full List Reference Table
These are all the different chart types you might create (I’m planning to create a table here so you can see the chart type and modules which support it).

• area
• arearange
• areaspline
• areasplinerange
• bar
• boxplot
• bubble
• column
• columnrange
• errorbar
• flags
• funnel
• gauge
• heatmap
• line
• pie
• polygon
• pyramid
• scatter
• solidgauge
• sparkline
• spline
• treemap
• waterfall