@ng-library/circular-graphs

Set of circular graphs for angular.

Usage no npm install needed!

<script type="module">
  import ngLibraryCircularGraphs from 'https://cdn.skypack.dev/@ng-library/circular-graphs';
</script>

README

@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 --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