Extra

BarChart

A FormaUI bar chart — vertical bars with rounded top corners, drawn with pure Compose Canvas (no chart-library dependency); gridlines, category labels, value labels, and a one-shot entry animation are all built in.

5 variantsThemed defaults

import dev.formaui.components.chart.FormaBarChart

DefaultValue labelsCustom colorsNo gridlinesStatic (no animation)

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

12345678FormaBarChart(
    entries = listOf(
        FormaChartEntry("Jan", 12f),
        FormaChartEntry("Feb", 32f),
        FormaChartEntry("Mar", 21f),
    ),
    showValueLabels = true,
)

FormaBarChart

Vertical rounded bars scaled against a "nice" auto-computed (or explicit) y-axis maximum, with optional gridlines, category labels, value labels, and an entry animation; exposes an auto-generated data summary as its content description.

ParameterTypeDefaultDescription

entriesrequiredTypeList<FormaChartEntry>DefaultrequiredDescriptionthe data to plot, one bar per entry, in order. Values must be finite and non-negative. An empty list renders an empty (but described) chart area.

modifierTypeModifierDefaultModifierDescriptionthe Modifier applied to the chart (it fills the available width at a minimum height of FormaChartDefaults.MinChartHeight).

barColorTypeColorDefaultColor.UnspecifiedDescriptionthe fill color for all bars (defaults to the theme's primary). A FormaChartEntry.color that is specified overrides this for that bar.

maxValueTypeFloat?DefaultnullDescriptionthe value the y-axis tops out at. When null, a "nice" rounded maximum is computed from the data. Must be finite and positive when supplied; values above it are clipped to the top of the plot.

showValueLabelsTypeBooleanDefaultfalseDescriptionwhether to draw each bar's formatted value above it. Labels use FormaChartDefaults.valueLabelStyle (tabular figures).

showCategoryLabelsTypeBooleanDefaulttrueDescriptionwhether to draw each entry's label below its bar. Labels use FormaChartDefaults.axisLabelStyle, centered per bar and ellipsized to the bar's slot width.

showGridLinesTypeBooleanDefaulttrueDescriptionwhether to draw horizontal gridlines dividing the plot into FormaChartDefaults.GridLineCount bands, in FormaChartDefaults.gridLineColor.

barCornerRadiusTypeDpDefaultFormaChartDefaults.BarCornerRadiusDescriptionthe radius of each bar's top corners (defaults to 4dp).

valueFormatterType(Float) -> StringDefaultFormaChartDefaults.ValueFormatterDescriptionformats a value for value labels and the auto-generated accessibility summary.

animationSpecTypeFiniteAnimationSpec<Float>?DefaultFormaChartDefaults.EntryAnimationSpecDescriptionthe entry animation for bar growth, or null to render a static final frame (deterministic in tests and screenshots).

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

Supporting API

FormaChartEntrydata class: One data point shared by all FormaUI charts (label, value, optional explicit color). Charts are stateless and redraw when the caller passes a structurally different list — an equal-but-new list never replays the entry animation.
FormaChartDefaultsobject: Defaults shared by all FormaUI charts: MinChartHeight (180dp), MinDonutSize (160dp), DonutStrokeWidth (24dp), LineStrokeWidth (2dp), LinePointRadius (3dp), BarCornerRadius (4dp), LegendSwatchSize (12dp), GridLineCount (4), seriesColors (a six-color M3 palette with error last), gridLineColor, valueLabelStyle (tabular figures), axisLabelStyle, ValueFormatter, and EntryAnimationSpec (an 800ms tween).
FormaChartLegendcomposable: A wrapping row of color swatches and labels, one item per FormaChartEntry. Charts never embed a legend — place one next to the chart with the same entries (and, for a donut, the same palette) so swatches resolve to the chart's colors; an optional valueFormatter appends each entry's formatted value. Labels are real Text, so the legend is natively accessible.

Accessibility

Exposes an auto-generated data summary (e.g. "Bar chart with 3 categories. Jan: 12. …") as its semantics content description — override with contentDescription; empty entries describe themselves as "Bar chart with no data".

PreviousBadge Next BottomAppBar