12

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]

Improve this question

3 Answers 3

Reset to default
43

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.
Improve this answer
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
    – Shan-Desai
    Commented Dec 14, 2017 at 11:02
  • thanks. Do you know the name of the map I have attached?
    – user8631713
    Commented Dec 15, 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...
    – Amrit
    Commented Jul 4, 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.
    – Shan-Desai
    Commented Jul 4, 2018 at 12:51
  • @amrit swimlane.github.io/ngx-charts is a ng2 wrapper for d3.js
    – Alex T
    Commented Aug 23, 2018 at 8:33
1

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: Syncfusion ng-charts

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

Improve this answer
1
  • 3
    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.
    – Mr Chow
    Commented Jul 30, 2019 at 2:35
1

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

Improve this answer