Donut Chart

import { WrDonutChart } from 'ngwr/donut-chart';

@Component({ imports: [WrDonutChart] })
export class MyComponent {
  protected readonly segments = [
    { label: 'Used', value: 60 },
    { label: 'Reserved', value: 25 },
    { label: 'Free', value: 15 },
  ];
}

<wr-donut-chart [segments]="segments" centerLabel="Disk" centerValue="60%" />

60%

Disk

Used60
Reserved25
Free15

<wr-donut-chart [segments]="segments" thickness="0" />

Used60
Reserved25
Free15

Name	Description	Type	Default
`segments`	Slices to render.	`readonly WrDonutSegment[]`	`[]`
`ariaLabel`	Accessible name of the chart. The ring itself is `aria-hidden`, so with `showLegend` off this is all a screen reader gets. Falls back to the donutChart.label catalog key.	`string \| null`	`null`
`size`	Diameter in CSS pixels (min 48).	`number`	`200`
`thickness`	Inner-ring thickness as a % of radius. 0 = solid pie.	`number`	`30`
`showLegend`	Show the legend under the chart.	`boolean`	`true`
`centerValue`	Bold value text in the center.	`string`	`''`
`centerLabel`	Smaller label under the center value.	`string`	`''`

interface WrDonutSegment {
  label: string;
  value: number;
  color?: string;
}

Name	Description	Type	Default
`WrDonutSegment`	One slice of the ring.	`interface`	—
`label`required	Legend label.	`string`	—
`value`required	Slice magnitude — share of the total.	`number`	—
`color`	CSS color for the slice.	`string`	`palette`

Installation

With center label

Solid pie

API

Types