@ng-library/circular-graphs

Set of circular graphs for angular.

• Radial Progress Bar graph
• Doughnut graph

Table of Contents

• Installation

• Documentation

  • Radial Progress Bar
    • Params
    • Usage
  • Doughnut
    • Params
    • Usage

• License

Installation

Install @ng-library/circular-graphs

npm i @ng-library/circular-graphs --save

Documentation

Radial Progress Bar

Params

param	type	description
value	int	Value of progress bar. Must be between 0 and 100.
color ?	string	Color of progress bar.
showValue ?	string	Show the value in percentaje in center of progress bar.

Usage:

@ app.module.ts

...
import { RadialProgressBarModule } from '@angular-lib/circular-graphs'; 
...

@NgModule({
    ...
    imports: [
        ...
        RadialProgressBarModule
    ],
    ...
})

@ file.component.ts

...
ngOnInit() {
    this.RadialProgressData = {
        value: 48,
        color: 'blue'
        showValue: true
    };
}
...

@ file.html

<ngl-radial-progress-bar
    style="width: 200px; height: 100px; display: block;"
    [graphData]="RadialProgressData"
></ngl-radial-progress-bar>

Doughnt

Params

param	type	description
values	array	Array of values to represent.
colors?	array	Color of segments of doughnt. If there isn't colors are applied random colors.
padding	boolean	Draw padding between doughnut segments.
labels	object
labels.position	string	Set the position of labels. Allowed values are 'internal' or 'external'.
labels.titles	array	Array of titles of labels

Usage:

@ app.module.ts

...
import { DoughnutModule } from '@angular-lib/circular-graphs'; 
...

@NgModule({
    ...
    imports: [
        ...
        DoughnutModule
    ],
    ...
})

@ file.component.ts

...
ngOnInit() {
    this.DoughnutData = {
        values: [32, 24, 21, 46],
        colors: ['red', 'blue', 'yellow', 'green']
    };
}
...

@ file.html

<ngl-doughnut
    style="width: 200px; height: 100px; display: block;"
    [graphData]="DoughnutData"
></nngl-doughnut>

License

GNU 2.0