August 14, 2022

Angular Library For Creating Beautiful Data Charts | NgxBeautifulCharts

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

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


See Demo And Download

Official Website(snowPu): Click Here

This superior jQuery/javascript plugin is developed by snowPu. For extra Advanced usage, please go to the official website.

Share

You may also like...

Leave a Reply

Your email address will not be published.