# Donut Chart

> Ring chart with optional center label / value. Set `thickness="0"` for a solid pie.

Source: https://ngwr.dev/reference/components/donut-chart  
Kind: Component

## Installation

```angular-ts
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 },
  ];
}
```

## With center label

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

## Solid pie

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

## API

| 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` | `''` |

## Types

Data shapes used by the inputs and outputs above.

```angular-ts
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` |