Charts in Angular 2+

Asked 14/12, 2017 at 10:28 Answered 15/11, 2018 at 7:24

Solved angular graph angular2-forms angular4-forms

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]

Pithecanthropus answered 14/12, 2017 at 10:28 Comment(0)

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

Hypesthesia answered 15/11, 2018 at 7:24 Comment(1)

You should probably point out that syncfusion is a "for pay" product and quite expensive. I would recommend some of the free options posted in the other answers. – Robotize 30/7, 2019 at 2:35

My Suggestions would be:

Ng-Charts
D3.JS
PrimeNG has a charts section
Dagre.js for DAGs (unfortunately in javascript)
Ngx-graph for nice DAGs but no documentation and weak support
ngx-charts from swimlane
HighCharts
Cytoscape.js for Directed Graphs
mermaidjs
Canvas.js - Angular-focused charts instead of HTML.

Bursary answered 14/12, 2017 at 10:31 Comment(7)

my way would be create a REST API to get information from MongoDB in JSON and then use this JSON in Angular to show data on the frontend. I think it is possible. Start looking for REST API in MongoDB queries – Bursary 14/12, 2017 at 11:2

thanks. Do you know the name of the map I have attached? – Pithecanthropus 15/12, 2017 at 5:11

ng-charts seems to have only some of the charts available ...can u suggest anything else which acts as a wrapper on d3.js and we can draw almost all type of charts... – Irvin 4/7, 2018 at 12:44

>almost all charts I would strongly suggest sticking with d3.js for that matter. I have been on the lookout for such a library but haven't had any breakthrough. – Bursary 4/7, 2018 at 12:51

@amrit swimlane.github.io/ngx-charts is a ng2 wrapper for d3.js – Agreed 23/8, 2018 at 8:33

I'm a huge primeng fan so glad they added charts, hopefully they expand them! – Robotize 30/7, 2019 at 2:43

@MrChow you should go ahead an update the answer if you want with the prime face charts with the link – Bursary 30/7, 2019 at 11:58

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

Rugby answered 15/12, 2017 at 17:34 Comment(0)