Donut Chart with Custom Center

The slices to draw, in order. Each item's value sets its share of the total, and its label is shown in the centre while the slice is hovered.

Chart width and height in pixels. Omit to fill the width of the parent element; the chart stays square.

Inner radius in pixels. 0 draws a solid pie; a positive value draws a donut and leaves room for PieCenter.

Default

0

Gap between neighbouring slices, in radians.

Default

0

Corner radius of each slice, in pixels.

Default

0

Angle where the first slice starts, in radians, clockwise from 12 o'clock (d3's convention): the default -Math.PI / 2 is 9 o'clock. bklit-ui's own comment calls the default "top", but its d3 arcs start at 9 o'clock too.

Default

-Math.PI / 2

Angle where the last slice ends, in radians. Together with startAngle this sets the sweep; the default is a full circle.

Default

(3 * Math.PI) / 2

Extra class name for the chart container.

Inline styles for the chart container, merged over the default sizing.

Index of the hovered slice, for controlled hover. Pass null for no hover; leave it undefined to let the chart manage hover itself.

Type

number | null

Called with the index of the hovered or keyboard-focused slice, or null when hover ends.

Type

(index: number | null) => void

Distance in pixels a hovered slice moves out (or grows by). The pie also reserves this much padding around its edge so a hovered slice is never clipped. A PieSlice can override it for its own slice.

Default

10

PieSlice elements to configure individual slices, an optional PieCenter, and any pattern or gradient definitions that slices reference through fill.

Transition for the slice entrance sweep, in the shape used by the motion library (type, duration in seconds, ease, and spring values). Defaults to a 1.1 second tween on the shared reveal curve.

Multiplier for the delay between one slice's entrance and the next. 0 starts all slices together.

Default

1

Turns off hover effects, PieSlice overrides and the hover readout in PieCenter. Meant for live editors that redraw the geometry while a control is dragged; leave it off otherwise.

Default

false

Accessible name of the chart.

Default

"Pie chart"

Longer accessible description of the chart.

Index of the slice this element configures, matching its position in the data array.

Colour override for this slice. Has no effect in bklit-tanstack-charts; set color on the PieData item, or use fill.

Paint override for this slice, for example url(#patternId) for a pattern or gradient defined as a child of the chart. Takes precedence over the data item's color and fill.

Play the entrance animation for this slice. Set false to draw it without animating.

Default

true

Accepted for bklit-ui compatibility. No glow is drawn, which matches how bklit-ui renders.

How the slice reacts when hovered: "translate" moves it outward, "grow" extends its outer radius, "none" leaves it in place.

Default

"translate"

Distance in pixels for the hover effect. Defaults to the chart's hoverOffset.

Default

the chart's `hoverOffset`

Accepted for bklit-ui compatibility; has no effect.

Label shown under the total while no slice is hovered. A hovered slice shows its own label instead.

Default

"Total"

Number format for the centre value, in Intl.NumberFormat terms (notation, currency, fraction digits and so on).

Default

{ maximumFractionDigits: 0, notation: "standard" }

Render function for custom centre content. It is called with { value, label, isHovered, data } while a slice is hovered; when nothing is hovered the default total is shown.

Type

(props: Readonly<PieCenterRenderProps>) => ReactNode

Extra class name for the centre container.

Class name for the value text.

Class name for the label text.

Text shown before the value, for example "$".

Text shown after the value, for example "%".