Extra

DonutChart

A FormaUI donut chart — proportional stroked arc segments around an open center slot, drawn with pure Compose Canvas (no chart-library dependency); segments cycle the shared series palette and sweep in clockwise on entry.

5 variantsThemed defaults

import dev.formaui.components.chart.FormaDonutChart

DefaultCustom paletteCenter contentWith legendZero-total track ring

Preview

This toggle is site chrome only — the preview has its own light/dark switch inside.

LIVE PREVIEW

Live preview — ~37 MB development build

Usage

KOTLIN

12345678FormaDonutChart(
    entries = listOf(
        FormaChartEntry("Rent", 850f),
        FormaChartEntry("Groceries", 420f),
        FormaChartEntry("Transport", 210f),
    ),
    centerContent = { Text("1480") },
)

FormaDonutChart

Proportional arc segments separated by small gaps around an open center, cycling FormaChartDefaults.seriesColors, with a centerContent slot (e.g. a total) and an auto-generated percentage summary as its content description; empty or all-zero data draws a neutral track ring instead of crashing.

ParameterTypeDefaultDescription

entriesrequiredTypeList<FormaChartEntry>DefaultrequiredDescriptionthe data to plot, one segment per entry, clockwise in order. Values must be finite and non-negative; each segment's sweep is proportional to its share of the total.

modifierTypeModifierDefaultModifierDescriptionthe Modifier applied to the chart. It keeps a 1:1 aspect ratio at a minimum size of FormaChartDefaults.MinDonutSize; size it explicitly (e.g. Modifier.size(200.dp)).

segmentColorsTypeList<Color>?DefaultnullDescriptionthe palette cycled for segments whose entry has no explicit FormaChartEntry.color; null uses FormaChartDefaults.seriesColors.

strokeWidthTypeDpDefaultFormaChartDefaults.DonutStrokeWidthDescriptionthe thickness of the donut's ring (defaults to 24dp).

strokeCapTypeStrokeCapDefaultStrokeCap.RoundDescriptionthe cap style for each segment's ends: StrokeCap.Round (the default) gives softly rounded ends, insetting each drawn arc by the caps' angular overhang so gaps stay visible and segments land on their true bounds (a segment too small to fit its two caps renders as a dot); StrokeCap.Butt gives flat, squared ends. Irrelevant on a closed ring (a lone visible segment, or the zero-total track ring).

startAngleTypeFloatDefault-90fDescriptionthe angle the first segment starts at, in degrees clockwise from 3 o'clock; the default starts at 12 o'clock.

segmentGapDegreesTypeFloatDefault2fDescriptionthe angular gap between adjacent segments, in degrees. Ignored when only one segment is visible. Must be finite and non-negative.

animationSpecTypeFiniteAnimationSpec<Float>?DefaultFormaChartDefaults.EntryAnimationSpecDescriptionthe entry animation for the clockwise reveal, or null to render a static final frame.

contentDescriptionTypeString?DefaultnullDescriptionan explicit accessibility description; when null a percentage summary of the data is generated automatically.

centerContentType@Composable () -> UnitDefault{}Descriptiona slot composed in the donut's center hole (e.g. a total or a caption). Centered but not clipped, so keep it smaller than the hole; its semantics stay independently accessible next to the chart summary.

Supporting API

FormaChartEntrydata class: The shared chart data point — see the bar-chart entry for the full shared chart API (FormaChartEntry, FormaChartDefaults, FormaChartLegend).

Accessibility

Exposes an auto-generated integer-percentage summary (e.g. "Donut chart with 3 segments. Rent: 57 percent. …") as its semantics content description — override with contentDescription; empty entries describe themselves as "Donut chart with no data", and the centerContent slot's semantics stay independently accessible.

PreviousDivider Next DropdownMenu