@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