Donut Chart

Pro

Donut or half-donut chart whose slices sweep in clockwise. Tap or drag around the ring to pull a slice out and show its name, value and share in the centre, with an optional legend.

Preview

Installation

npx @lumioui/cli add pro/donut-chart

Usage

import { donutPalette, DonutChart, DonutLegend } from "@/components/ui/donut-chart/donut-chart";
<DonutChart />

Also exported: donutPalette, DonutLegend.

Examples

Portfolio allocation

An investing app's allocation view.

Daily macros

A nutrition app's day at a glance.

Monthly spending

A banking app's month in categories.

Storage breakdown

A device-storage settings page.

API reference

DonutChart

Prop Type Default
data* DonutSegment[] —
size number

Outer diameter in pt. Default 220.

 220
thickness number

Ring thickness in pt. Default 26.

 26
gap number

Surface gap between slices in pt. Default 3.

 3
shape "full" | "half"

"full" ring (default) or a "half" arc that opens downward.

 "full"
rounded boolean

Round slice ends. Default true.

 true
selectedIndex number | null

Controlled selection — null for none.

 —
defaultSelectedIndex number | null

Uncontrolled initial selection. Default null.

 null
onSelect
(index: number | null … (index: number | null, segment: DonutSegment | null) => void
—
interactive boolean

Allow touch and drag-around selection. Default true.

 true
totalLabel string

Centre label with nothing selected. Default "Total".

 "Total"
litIndex number | null

With nothing selected, keep this slice lit and dim the rest — e.g. the free space on a nearly full disk. Default null.

 null
centerValue "value" | "percent"

Centre figure for a selected slice — its value (default) or its share.

 "value"
formatValue (value: number) => string

Format values (centre figure, screen-reader text).

 —
renderCenter (info: DonutCenterInfo) => React.ReactNode

Replace the default centre entirely.

 —
accessibilityLabel string

Screen-reader summary. Default lists every slice.

 —
className string —

DonutLegend

Prop Type Default
data* DonutSegment[] —
layout "list" | "bars" | "grid"

"list" — inset rows with value + share; "bars" — rows with a share bar; "grid" — two-column swatches with the share as the figure.

 "list"
selectedIndex number | null null
onSelect
(index: number | null … (index: number | null, segment: DonutSegment | null) => void

Tapping a row selects its slice; tapping the selected row clears.

 —
formatValue (value: number) => string —
describe
(segment: DonutSegment … (segment: DonutSegment, index: number) => string | undefined

Detail line under each label (list and bars layouts).

 —
className string —