Pie Chart for Angular

import { AuiPieChart } from '@absoluteui/angular/pie-chart';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Pie Chart page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { pieChart: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import { AuiPieChart } from '@absoluteui/angular/pie-chart';
import type { PieChartSlice } from '@absoluteui/components/pie-chart';

@Component({
  selector: 'app-plans',
  imports: [AuiPieChart],
  template: `<aui-pie-chart label="Plan mix" [slices]="slices" [donut]="true"></aui-pie-chart>`,
})
export class PlansComponent {
  readonly slices: PieChartSlice[] = [{ id: 'free', label: 'Free', value: 62 }, { id: 'pro', label: 'Pro', value: 38 }];
}

<aui-pie-chart>

Class AuiPieChart; template reference #ref="auiPieChart".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
label	string		Required. Chart title: visible text and the accessible name of the plot (aria-labelledby).
hideLabel	boolean	false	Visually hide the title; it stays the accessible name.
description	string		Visible description below the title, also referenced by aria-describedby (text only).
summary	string		Replaces the generated accessible summary (aria-describedby).
valueFormat	NumberFormatOptions		Number format for values in tooltips, labels, the data table, the summary, and axis ticks (ticks use fixed fraction digits).
formatValue	(value: number) => string		Custom value text; overrides valueFormat everywhere except axis ticks.
slices	readonly PieChartSlice[]		Required. Slices: { id, label, value: number | null, color?: 1-8 }. Negative, null, and non-finite values are not plotted; they are listed in the summary and the table.
donut	boolean	false	Render a ring (inner radius 60%).
centerLabel	string		Donut center text. Default: the formatted total of visible slices; empty string: none. aria-hidden (the summary states the total).
valueLabel	string		Data table header of the value column. Default: localized “Value”.
legend	ChartLegendMode	'auto'	auto: legend when there is more than one series (pie charts: always).
dataTable	ChartTableMode	'toggle'	Data table fallback with the exact data: behind a Show data table button (built on first open), always visible, visually hidden (screen readers only), or none.
tooltip	boolean	true	Tooltip on pointer hover and keyboard focus.
patterns	boolean	false	Dash patterns and texture fills so series never differ by color alone. Off by default (plain colors); always on in forced colors. Turn it on when series are told apart by color alone (grouped or stacked series, multi-slice pies) and no labels carry the distinction (WCAG 1.4.1).
height	number	'300'	Plot height in CSS px (integer 120-2000); the width follows the container.
sliceLabels	PieChartSliceLabels	'percent'	Text printed on slices large enough to hold it.
locale	string	'en-US'	Number, date, and message locale.
direction	Direction	'ltr'	rtl mirrors the category/x axis, the value axis side, and Left/Right arrow keys.

Two-way bindings

Model	Type	Change output	Description
[(hiddenSeries)]	readonly string[]	(hiddenSeriesChange)	Ids of series (or slices) hidden initially; update() replaces the hidden set.

Outputs

Output	Payload	Description
(seriesToggled)	PieChartSeriesToggleDetail	The user toggled a legend entry (pointer or keyboard). Not emitted for update() or setSeriesVisible(). Re-emits aui-series-toggle.

Methods

Call them through a viewChild query or a template reference.

Method	Description
setSeriesVisible(id: string, visible: boolean): void	Show or hide a series (slice) programmatically; emits no event.