0.0.3 • Published 4 years ago
@ng-library/circular-graphs v0.0.3
@ng-library/circular-graphs
Set of circular graphs for angular.
- Radial Progress Bar graph
- Doughnut graph
Table of Contents
Installation
Install @ng-library/circular-graphs
npm i @ng-library/circular-graphs --saveDocumentation
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>