DonutChartbeta

Donut or pie chart for part-to-whole composition, with an optional center total.

Playground

stable
beta
experimental

Donut chart: 3 segments, total 100
Segment	Value	Share
stable	64	64%
beta	24	24%
experimental	12	12%

Show total

Show legend

Inner radius

Pad angle (°)

Size (px)

<script lang="ts">
  import { DonutChart } from '@urbicon-ui/blocks';

  const data = [
    { label: 'stable', value: 64 },
    { label: 'beta', value: 24 },
    { label: 'experimental', value: 12 }
  ];
</script>

<DonutChart
  {data}
  padAngle={1}
  showTotal
/>

01 Examples

Each DonutDatum is a label and a value, and data is the only required prop. Slices are sized by value and coloured from the palette unless you set a slice color.

Donut with center total

showTotal prints the summed value in the hole; totalLabel captions it.

Direct
Referral
Organic
Social

Donut chart: 4 segments, total 100
Segment	Value	Share
Direct	45	45%
Referral	30	30%
Organic	18	18%
Social	7	7%

<DonutChart data={sources} showTotal totalLabel="Visits" />

Pie

Set innerRadiusRatio to 0 for a solid pie when the hole isn't needed.

Direct
Referral
Organic
Social

Donut chart: 4 segments, total 100
Segment	Value	Share
Direct	45	45%
Referral	30	30%
Organic	18	18%
Social	7	7%

<DonutChart innerRadiusRatio={0} data={sources} />

Formatted values

formatValue controls the center total, the per-slice tooltips, and the data-table fallback.

Rent
Food
Transport
Savings

Donut chart: 4 segments, total €2,600
Segment	Value	Share
Rent	€1,200	46%
Food	€600	23%
Transport	€300	12%
Savings	€500	19%

<DonutChart data={budget} formatValue={eur} showTotal totalLabel="Monthly" padAngle={1.5} />

02 Customization

Custom slice colors

Each slice accepts an explicit color; omitted slices fall back to the categorical palette.

Done
In progress
Blocked

Donut chart: 3 segments, total 100
Segment	Value	Share
Done	72	72%
In progress	20	20%
Blocked	8	8%

<DonutChart
  showTotal
  data={[
    { label: 'Done', value: 72, color: 'var(--color-success)' },
    { label: 'In progress', value: 20, color: 'var(--color-primary)' },
    { label: 'Blocked', value: 8, color: 'var(--color-danger)' }
  ]}
/>

03 Accessibility

SVG with role="img"

The SVG carries role="img" with a generated aria-label noting the segment count and total.

Data-table fallback

A visually hidden table lists each segment with its value and computed share, so the composition is fully available to screen readers.

Per-segment tooltips

Each arc includes a native <title> with its label, value, and percentage share.

04 API Reference

15 props

15 props 1 required

Prop	Type	Default	Description
`data` required	`DonutDatum[]`	—	Slices; angle is each value's share of the total.
`ariaLabel`	`string`	—	Accessible label; a summary is generated when omitted.
`class`	`string`	—	Extra classes merged onto the wrapper.
`formatValue`	`(value: number) => string`	—	Format values for the center total, tooltips, and the data table.
`innerRadiusRatio`	`number`	`0.6`	Inner-hole radius as a fraction of the outer radius (0 = pie).
`locale`	`string`	—	BCP-47 locale for the default number formatter.
`padAngle`	`number`	`0`	Gap between slices in degrees.
`preset`	`string`	—	Apply a named preset registered on `<BlocksProvider>`.
`showLegend`	`boolean`	`true`	Show the legend.
`showTotal`	`boolean`	`false`	Show the summed total in the center hole.
`size`	`number`	`220`	Square SVG size in px.
`slotClasses`	`DonutChartSlotClasses`	—	Per-slot class overrides.
`totalLabel`	`string`	—	Caption under the center total (e.g. "Total").
`unstyled`	`boolean`	—	Remove all default tv classes.
`...HTMLAttributes<HTMLElement>` inherited	`HTMLAttributes`	—	HTML attributes (excluding: 'children')

05 Types

Local type definitions used by this component.

4 types

Only referenced

Name	Kind	Category	Used by	Description
DonutDatum	interface	helper	1	A single slice of a donut / pie chart.
DonutChartProps	interface	props	0	—
DonutChartSlotClasses	type	helper	1	Per-slot class overrides for `<DonutChart>`.
DonutChartSlot	type	helper	0	Slots `<DonutChart>` paints.

06 Installation

Import

import { DonutChart } from '@urbicon-ui/blocks';

llm.txt