Pie Chart

Part-to-whole at a glance, as a donut or pie with up to six slices.

Stable

Web

iOS

Android

@advui/charts

Source

Donut

Preview

Code

Projects by sectorActive projects, September 2026

Health · 34.9%

WASH · 25.2%

Education · 15.8%

Protection · 13.9%

Food security · 10.2%

Installation

Package

CLI (copy source)

pnpm

pnpm add @advui/charts

npm

npm install @advui/charts

Usage

import { PieChart } from '@advui/charts'

<PieChart
  title="Projects by sector"
  data={[{ label: 'Health', value: 412 }, { label: 'WASH', value: 298 }]}
/>

Examples

Pie, folding into Other

Preview

Code

Funding by donorShare of 2026 contributions

Donor A · 36.9%

Donor B · 23.8%

Donor C · 16.9%

Donor D · 10.8%

Other · 11.5%

API reference

PieChart

Prop	Type	Default	Description
`title` required	`string`	—	Names the chart: its heading and accessible name.
`description`	`string`	—	Muted line under the title (units, period).
`data` required	`{ label: string; value: number }[]`	—	The parts. Zero and negative values are left out; slices are drawn largest first.
`variant`	`'donut' \| 'pie'`	`'donut'`	A donut shows the total in the middle.
`maxSlices`	`number`	`6`	More parts than this fold the smallest into "Other".
`text`	`{ label, value, share, other, total }`	—	Table headings and the "Other" / "Total" words, for translation.
`valueFormatter`	`(value: number) => string`	—	Formats tooltip and table values. Axis ticks are compact (1.2K).
`height`	`number`	`240`	Pixels, including the axes.
`width`	`number`	—	Fixed width. By default it fills its container.
`labels`	`Partial<ChartLabels>`	—	"Show table", "Hide table" and the keyboard hint, for translation.

Accessibility

The chart is a figure named by its title. The plot is one focusable image whose name gives the title, description and a hint; the arrow keys (Home / End too) step through the values, which a polite live region reads out.
Every chart has a table view ("Show table") with the same values, so nothing depends on seeing colors or hovering.
Identity never relies on color alone: two or more series get a legend, and the tooltip names each value.
Colors come from the chart1…chart8 theme keys, a palette checked for color-blind separation in light and dark mode.
The legend names every slice with its share, so the percentages are readable without the tooltip.

Keyboard interactions
Key	Action
`Tab`	Focuses the plot, then the table button.
`Arrow keys / Home / End`	Move between values and read them.
`Escape`	Hides the tooltip.

Responsive behavior

The circle fits the smaller of the width and height.

Platform notes

Web

SVG in the page. Hover shows the tooltip; the arrow keys work once the plot has focus.

iOS

Drawn with react-native-svg. Tap the plot to show the tooltip for that point. VoiceOver and TalkBack read the title and description, without the arrow-key hint; Show table lists every value.