ComponentUpdated in v15

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.

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

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

With center label

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

Solid pie

Set thickness to 0.

<wr-donut-chart [segments]="segments" thickness="0" />
  • Used60
  • Reserved25
  • Free15

Tooltip

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

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

On (default)

  • Used60
  • Reserved25
  • Free15

[tooltip]="false"

  • Used60
  • Reserved25
  • Free15

API

NameDescriptionTypeDefault
segmentsSlices to render.readonly WrDonutSegment[][]
ariaLabelAccessible name of the chart. Falls back to the donutChart.label catalog key.string | nullnull
sizeDiameter in CSS pixels (min 48).number200
thicknessRing thickness as a % of the radius. 0 draws a solid pie.number30
showLegendShow the legend under the chart.booleantrue
centerValueBold value text in the center.string''
centerLabelSmaller label under the center value.string''
tooltipShow the slice label and value on hover.booleantrue
valueFormatWrites each value in the legend and the tooltip. null uses Intl.NumberFormat in LOCALE_ID.((value: number) => string) | nullnull

Types

interface WrDonutSegment {
  label: string;
  value: number;
  color?: string;
}
NameDescriptionTypeDefault
WrDonutSegmentOne slice of the ring.interface—
labelrequiredLegend label.string—
valuerequiredSlice size, as a share of the total.number—
colorCSS color for the slice.stringpalette

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.

VariableDefaultDeclared on
--wr-donut-chart-center-label-font-sizevar(--wr-text-xs).wr-donut-chart__center-label
--wr-donut-chart-center-label-margin-topvar(--wr-space-xs).wr-donut-chart__center-label
--wr-donut-chart-center-value-font-sizevar(--wr-text-2xl).wr-donut-chart__center-value
--wr-donut-chart-center-value-font-weightvar(--wr-font-weight-semibold).wr-donut-chart__center-value
--wr-donut-chart-center-value-line-heightvar(--wr-leading-tight).wr-donut-chart__center-value
--wr-donut-chart-font-familyvar(--wr-font-family-base).wr-donut-chart
--wr-donut-chart-gapvar(--wr-space-lg).wr-donut-chart
--wr-donut-chart-legend-gap-xvar(--wr-space-lg).wr-donut-chart__legend
--wr-donut-chart-legend-gap-yvar(--wr-space-sm).wr-donut-chart__legend
--wr-donut-chart-legend-item-font-sizevar(--wr-text-xs).wr-donut-chart__legend-item
--wr-donut-chart-legend-item-gapvar(--wr-space-sm).wr-donut-chart__legend-item
--wr-donut-chart-legend-label-font-weightvar(--wr-font-weight-medium).wr-donut-chart__legend-label

Dependencies

Built onPopover

See also