Simple
A lightweight donut-style pie chart rendered entirely on a Canvas.
Each PieChartData entry contributes an arc whose sweep angle is proportional to its value relative to the total sum. A circular hole is punched in the center (controlled by holeRatio) to produce the donut appearance. When data is empty or all values are zero, negative, or non-finite, a neutral skeleton ring is drawn instead so the layout space is preserved.
The chart exposes a combined contentDescription for accessibility services, built from contentDescriptionPrefix followed by each label–value pair (always using the original values).
On first composition the slices animate their sweep angles from zero to their final proportions (see animate). The animation is drawn with Compose's Animatable and reads the animated value inside the draw scope, so no platform-specific rendering APIs are involved.
This composable is available on all platforms (commonMain).
Parameters
The slices to render. Colors are typically sourced via stylishChartColor.
Leading text for the accessibility description (e.g. "Expense breakdown").
Modifier applied to the outer Canvas.
Diameter of the chart. Defaults to DefaultStylishDimensions.pieChartSize (160 dp).
Radius of the center hole as a fraction of chartSize. Defaults to 0.3.
Radius of the skeleton ring shown when data is empty, as a fraction of chartSize. Defaults to 0.4.
Fill color of the center hole. Defaults to MaterialTheme.colorScheme.surface.
Fill color of the skeleton ring displayed in the empty state. Defaults to MaterialTheme.colorScheme.outlineVariant.
Angle in degrees where the first slice begins, measured clockwise from 3 o'clock. Defaults to -90 (top of the chart).
When true, slices animate their sweep angles from zero on first composition using tween(StylishTheme.animation.durationMedium). When false, the chart appears instantly. Defaults to true.