@ngx-chart/doughnut

Angular library for draw doughnut charts.

Usage no npm install needed!

<script type="module">
  import ngxChartDoughnut from 'https://cdn.skypack.dev/@ngx-chart/doughnut';
</script>

README

@ngx-chart/doughnut

Angular library for draw doughnut charts.

Table of Contents

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