@ngx-chart/doughnut

Angular library for draw doughnut charts.

Table of Contents

• Installation

• Documentation

  • Doughnut
    • Params
    • Usage

• License

Installation

Install @ngx-chart/doughnut

npm i @ngx-chart/doughnut --save

Documentation

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 { DoughnutGraphModule } from '@ngx-chart/doughnut-graph';
...

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

@ 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"
></ngl-doughnut>

License

GNU 2.0