@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