Studio
2

Pie Chart

Installation

pnpm dlx @mielui/svelte add pie-chart

Usage

Root accepts data with stable key and value fields. Config supplies a label, color, and optional formatter for each key. Values must be finite and nonnegative; do not represent a negative balance as a slice.

Place Arc and an optional Label inside Plot. Legend and Tooltip belong directly inside Root. Tooltips inherit the theme’s border and glass settings and track the pointer without a trailing position animation. Set innerRadius to 0 on Arc for a solid pie. For a donut, add Label or replace its children to show a custom center.

The total comes from the visible data. Keep category keys stable across updates so slices and labels stay associated with the same category.

Chart types

Pie chart

Show a few categories as shares of a total.

Donut chart

Place a total or active value inside a category breakdown.

Loading and empty data

Set loading on Root while a request is pending. The chart keeps its height and displays a neutral skeleton. An empty dataset shows an empty state instead of fabricated values. Try each state below.

Animation

The default reveal runs on entry. Data changes transition from the current display. Set animation="live" for subtle sequential highlights with quiet intervals, without moving segment boundaries. The effect pauses while a segment is active, offscreen, or the tab is hidden. Set animation="none" to disable chart motion.

Chart motion follows reduced-motion preferences and the theme motion setting. Every chart-type guide includes a live example so you can compare the effect on different marks.

Accessibility

Give Root a descriptive aria-label. Root includes a screen-reader data table. Focus a legend item to inspect its value and percentage. Pointer users can inspect the same values on each slice. Escape dismisses the tooltip.

API reference

PieChart.Root

Prop Type Default
aria-label Required string

Defines a string value that labels the current element.

 —
data Required readonly PieChartDatum[] —
config Required { [x: string]: { label: string; color?: string | undefined; format?: ((value: number) => string) | undefined; }; } —
loading boolean | undefined false
animation "none" | "reveal" | "live" | undefined 'reveal'
children Snippet<[]> | undefined —

PieChart.Arc

Prop Type Default
innerRadius number | undefined 0.68
cornerRadius number | undefined 4
padAngle number | undefined 0.035
class string | undefined —

PieChart.Label

Prop Type Default
children Snippet<[{ total: number; active: PieChartDatum | undefined; }]> | undefined —

PieChart.Legend

Prop Type Default
children Snippet<[{ item: PieChartDatum; label: string; value: string; percentage: number; }]> | undefined —

PieChart.Plot

PieChart.Tooltip

Prop Type Default
children Snippet<[{ item: PieChartDatum; label: string; value: string; percentage: number; }]> | undefined —