Simple
A vertical bar chart with optional stacked segments, rendered on a Compose Canvas for lightweight, dependency-free drawing.
Each BarChartData entry produces one bar whose height is proportional to its value relative to the dataset maximum. Horizontal grid lines with magnitude-scaled axis labels (via formatCompact, without unit suffixes) are drawn on the left. When data is empty, emptyLabel is centered in the chart area.
Bars support two modes:
Single-color — when
BarChartData.segmentsis empty, the bar is filled with barColor and given rounded corners (topRadius) on all four sides.Stacked — when segments are present, each is drawn in its own color; only the topmost non-zero segment is rounded.
Extreme values are handled defensively: negative, NaN, and infinite values render as zero-height bars (the chart floor is always zero), while the accessibility description always reflects the original values.
On first composition bars animate their height from zero to the target value (see animate). Text layouts (category labels, grid values, and the empty label) are measured once per data change in composition and reused inside the draw scope, so frames do not re-measure text.
This composable is available on all platforms (commonMain). Text is drawn with Compose's common rememberTextMeasurer + drawText APIs.
Parameters
The categories to render as bars.
Leading text for the combined accessibility description (e.g. "Monthly expenses").
Text displayed at the chart center when data is empty.
Modifier applied to the outer Canvas.
Fill color for single-color (non-stacked) bars. Defaults to MaterialTheme.colorScheme.primary.
Color of horizontal grid lines. Defaults to MaterialTheme.colorScheme.outlineVariant.
Total height of the chart area. Defaults to DefaultStylishDimensions.barChartHeight.
Corner radius applied to the top of each bar (or the topmost segment in stacked mode). Defaults to 4 dp.
Text size for axis and category labels. Defaults to 10 dp.
Number of horizontal grid lines including the baseline. Defaults to 4.
When true, bars animate their height from zero on first composition using tween(StylishTheme.animation.durationMedium). When false, the chart appears instantly. Defaults to true.