# Donut Chart

> Parts of a whole as a ring or a pie.

Source: https://ngwr.dev/charts/donut-chart  
Updated in v15

## Installation

Import the class, and `@use` the entry point in your global styles: without it the component renders unstyled.

```typescript
import { Component } from '@angular/core';
import { WrDonutChart } from 'ngwr/charts/donut-chart';

@Component({ imports: [WrDonutChart] })
export class MyComponent {}
```

```scss
@use 'ngwr/charts/donut-chart';
```

## With center label

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

## Solid pie

Set `thickness` to `0`.

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

## Tooltip

Set `[tooltip]="false"` to turn it off.

```angular-html
<wr-donut-chart [segments]="segments" />
<wr-donut-chart [segments]="segments" [tooltip]="false" />
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `segments` | Slices to render. | `readonly WrDonutSegment[]` | `[]` |
| `ariaLabel` | Accessible name of the chart. Falls back to the `donutChart.label` catalog key. | `string \| null` | `null` |
| `size` | Diameter in CSS pixels (min 48). | `number` | `200` |
| `thickness` | Ring thickness as a % of the radius. `0` draws a 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` | `''` |
| `tooltip` | Show the slice label and value on hover. | `boolean` | `true` |
| `valueFormat` | Writes each value in the legend and the tooltip. `null` uses `Intl.NumberFormat` in `LOCALE_ID`. | `((value: number) => string) \| null` | `null` |

## Types

```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 size, as a share of the total. | `number` | — |
| `color` | CSS color for the slice. | `string` | `palette` |

## CSS variables

Set these on the component's selector or a wrapper, not on `:root`: the defaults are declared on `ngwr/charts/donut-chart`'s own element.

| Variable | Default | Declared on |
| --- | --- | --- |
| `--wr-donut-chart-center-label-font-size` | `var(--wr-text-xs)` | `.wr-donut-chart__center-label` |
| `--wr-donut-chart-center-label-margin-top` | `var(--wr-space-xs)` | `.wr-donut-chart__center-label` |
| `--wr-donut-chart-center-value-font-size` | `var(--wr-text-2xl)` | `.wr-donut-chart__center-value` |
| `--wr-donut-chart-center-value-font-weight` | `var(--wr-font-weight-semibold)` | `.wr-donut-chart__center-value` |
| `--wr-donut-chart-center-value-line-height` | `var(--wr-leading-tight)` | `.wr-donut-chart__center-value` |
| `--wr-donut-chart-font-family` | `var(--wr-font-family-base)` | `.wr-donut-chart` |
| `--wr-donut-chart-gap` | `var(--wr-space-lg)` | `.wr-donut-chart` |
| `--wr-donut-chart-legend-gap-x` | `var(--wr-space-lg)` | `.wr-donut-chart__legend` |
| `--wr-donut-chart-legend-gap-y` | `var(--wr-space-sm)` | `.wr-donut-chart__legend` |
| `--wr-donut-chart-legend-item-font-size` | `var(--wr-text-xs)` | `.wr-donut-chart__legend-item` |
| `--wr-donut-chart-legend-item-gap` | `var(--wr-space-sm)` | `.wr-donut-chart__legend-item` |
| `--wr-donut-chart-legend-label-font-weight` | `var(--wr-font-weight-medium)` | `.wr-donut-chart__legend-label` |

## Dependencies

| Built on | [Popover](https://ngwr.dev/reference/components/popover) |
| --- | --- |

## See also

- [Meter Group](https://ngwr.dev/charts/meter-group) — One bar split into labelled parts, with a legend.
- [Bar Chart](https://ngwr.dev/charts/bar-chart) — Vertical bars for one series of values.
- [Gauge](https://ngwr.dev/charts/gauge) — A read-only semicircle dial for a single value.
- [Colors](https://ngwr.dev/guides/tokens/colors) — The --wr-color-* tokens, and which one to use for fills, text and borders.
- [Popover](https://ngwr.dev/reference/components/popover) — Show a template, or a text tooltip, next to its trigger.