Charts in Angular 2+

Question

I want to create a graph similar to the picture I have attached or may be a bar graph. I am using Angular 4 and I have no idea about graphs in Angular. Is a reference link or some sample code available?

[![Graph][1]][1]

Answer 1

My Suggestions would be:

1. Ng-Charts
2. D3.JS
3. PrimeNG has a charts section
4. Dagre.js for DAGs (unfortunately in javascript)

5. Ngx-graph for nice DAGs but no documentation and weak support

6. ngx-charts from swimlane

7. HighCharts

8. Cytoscape.js for Directed Graphs
9. mermaidjs
10. Canvas.js - Angular-focused charts instead of HTML.

Answer 2

We can achieve your requirement by using Syncfusion angular-charts. For more details about Syncfusion angular-charts please find attached demo and FT links.

Sample: https://stackblitz.com/edit/angular-zo5arc?file=src/app/app.module.ts

Screenshot:

FT: https://www.syncfusion.com/angular-ui-components/angular-charts

Demo link: https://ej2.syncfusion.com/angular/demos/#/material/chart/spline

UG: https://ej2.syncfusion.com/angular/documentation/chart/getting-started

Answer 3

You can use Plotly.js. This is not an Angular Module but can be used inside your angular App. Thats what I use.

There is also eCharts I once used and it is very powerfull and has a good UI