import { Component } from '@angular/core';
import { WrDonutChart } from 'ngwr/charts/donut-chart';
@Component({ imports: [WrDonutChart] })
export class MyComponent {}Donut Chart
Parts of a whole as a ring or a pie.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
With center label
<wr-donut-chart [segments]="segments" centerLabel="Disk" centerValue="60%" />Solid pie
Set thickness to 0.
<wr-donut-chart [segments]="segments" thickness="0" />Tooltip
Set [tooltip]="false" to turn it off.
<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
interface WrDonutSegment {
label: string;
value: number;
color?: string;
}| Name | Description | Type | Default |
|---|---|---|---|
WrDonutSegment | One slice of the ring. | interface | — |
labelrequired | Legend label. | string | — |
valuerequired | 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 |
|---|
See also
Component Meter GroupOne bar split into labelled parts, with a legend.Component Bar ChartVertical bars for one series of values.Component GaugeA read-only semicircle dial for a single value.Guide ColorsThe --wr-color-* tokens, and which one to use for fills, text and borders.Component PopoverShow a template, or a text tooltip, next to its trigger.