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.
2. Chart.js Angular 2 (ng2-charts)
Beautiful charts for Angular2 based on Chart.js
3. Highcharts Angular 2
Angular2 charting components based on Highcharts.
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.
5. Fusion Charts Angular2
Easy to use AngularJS charts plugin for adding interactive charts to your website.
6. ZingChart Angular 2 Chart
Building gorgeous and interactive Angular 2 charts is easy with ZingChart
7. D3.js Angular 2 Graph Integration
D3 + Angular2 Composable Re-usable Charting Framework
8.Google Charts in Angular2
Angular 2 google chart.
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.
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.
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.
12. Pie Charts and Angular 2
Simple pie chart using Angular 2.
13. RadialProgressChart Angular2
Radial Progress Chart using Angular 2
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.
15. Angular 1 Parallel Coordinates
Angular directive for creating parallel coordinates charts using D3
16. Angular 1 PieMix
A nested pie chart control with angular bound data composed as a single SVG
more coming soon…
More references and useful resources:
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
You missed ngx-charts! The only Angular2+ chart framework where Angular draws the SVG and isn’t just a wrapper! It’s a truly declarative Charting Framework for Angular2 and beyond! https://github.com/swimlane/ngx-charts
I’d put this as number 1. Looks like an impressive framework. I haven’t used it yet, but the demo looks really good 🙂