Angular Library For Creating Beautiful Data Charts

NgxBeautifulCharts is an Angular library for creating charts in your app. Graphics are customizable and aesthetic. Many charts that other Angular chart libraries do not provide, such as Sunburst Chart, Gantt Chart, and Timeline Chart are offered by Ngx Beautiful Charts.

angular material charts, ngx charts, angular material charts and graphs, angular chart npm, best angular charts, ngx charts angular 8, angular charts stackblitz

Types of charts offered

Line Graph
Multi Line Graph
Bar Chart
Clustered Bar Chart
Pie Chart
Donut Chart
Sunburst Chart
Gantt Chart
Timeline Chart

Javascript Library for Exporting SVG Charts from DOM | exportJS

How to make use of it:

Installation:

# NPM
$ npm install ngx-beautiful-charts --save

HTML:

<ngx-line-graph
[width]="800" [height]="400"
[minX]="0" [maxX]="100" 
[minY]="0" [maxY]="50" 
[gridPrecisionX]="10" 
[gridPrecisionY]="10"
xAxisTitle="Time"
yAxisTitle="Distance"
[data]="lineData"
color="#ff4444"></ngx-line-graph>

TypeScript:

lineData = [
    {x: 10, y: 10, info: ''},
    {x: 80, y: 40, info: ''},
    {x: 30, y: 30, info: ''},
    {x: 40, y: 20, info: ''},
    {x: 40, y: 30, info: ''},
    {x: 40, y: 40, info: ''},
    {x: 50, y: 20, info: ''},
    {x: 90, y: 20, info: ''},
    {x: 41, y: 45, info: ''},
    {x: 51, y: 22, info: ''},
    {x: 92, y: 10, info: ''}
  ];

Ngx Beautiful Charts Plugin/Github