Skip to content

Extra

LineChart

A FormaUI line chart — a single series plotted as a smooth (or straight) trend line with an optional area fill, point markers, gridlines, and x-axis labels, drawn with pure Compose Canvas (no chart-library dependency). Accepts negative values.

dev.formaui.components.chart

Smooth with area fillStraight polylinePoint markersNegative valuesX-axis labelsFlat / single point

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

FormaLineChart(
    values = listOf(4f, 9f, 6f, 14f, 11f),
    showPoints = true,
    xLabels = listOf("Mon", "Tue", "Wed", "Thu", "Fri"),
)

FormaLineChart

Plots a List<Float> as a trend line: smooth horizontally-clamped cubic curves (no vertical overshoot) or straight segments, a gradient area fill, optional point markers and x labels, and a leading-edge sweep entry animation; degenerate data (empty, single point, flat series) renders gracefully.

valuesrequiredTypeList<Float>DefaultrequiredDescriptionthe series to plot, in order, spread evenly across the width. Values must be finite (negative values are allowed). 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).
lineColorTypeColorDefaultColor.UnspecifiedDescriptionthe color of the line, its points, and the area fill (defaults to the theme's primary).
strokeWidthTypeDpDefaultFormaChartDefaults.LineStrokeWidthDescriptionthe thickness of the line (defaults to 2dp).
minValueTypeFloat?DefaultnullDescriptionthe value the y-axis bottoms out at. When null, the data's own minimum is used. Must be finite when supplied; values below it are clipped to the plot's bottom edge.
maxValueTypeFloat?DefaultnullDescriptionthe value the y-axis tops out at. When null, the data's own maximum is used. Must be finite (and greater than minValue when both are supplied); values above it are clipped to the plot's top edge.
smoothTypeBooleanDefaulttrueDescriptionwhether segments are smoothed cubic curves or straight polyline segments. Smoothing clamps control points horizontally to the midpoint between neighboring x positions, so the curve never overshoots a value vertically.
fillAreaTypeBooleanDefaulttrueDescriptionwhether to fill the area under the line with a vertical gradient of lineColor fading to transparent at the plot floor.
showPointsTypeBooleanDefaultfalseDescriptionwhether to draw a FormaChartDefaults.LinePointRadius circle marker at each data point. A single-value dataset always draws its point (there is no segment to draw).
showGridLinesTypeBooleanDefaulttrueDescriptionwhether to draw horizontal gridlines dividing the plot into FormaChartDefaults.GridLineCount bands, in FormaChartDefaults.gridLineColor.
xLabelsTypeList<String>DefaultemptyList()Descriptionoptional x-axis labels drawn under the plot in FormaChartDefaults.axisLabelStyle, paired index-by-index with values and centered under their points; labels beyond the point count are ignored. Empty reserves no label band.
valueFormatterType(Float) -> StringDefaultFormaChartDefaults.ValueFormatterDescriptionformats a value for the auto-generated accessibility summary.
animationSpecTypeFiniteAnimationSpec<Float>?DefaultFormaChartDefaults.EntryAnimationSpecDescriptionthe entry animation for the leading-edge sweep, or null to render a static final frame.
contentDescriptionTypeString?DefaultnullDescriptionan explicit accessibility description; when null a summary of the data is generated automatically.

Supporting API

FormaChartDefaultsobject
Shared chart defaults (LineStrokeWidth, LinePointRadius, GridLineCount, EntryAnimationSpec, ValueFormatter, …) — see the bar-chart entry for the full shared chart API.

Accessibility

Exposes an auto-generated summary of point count, min–max range, and latest value (e.g. "Line chart with 5 points. Range 4 to 14. Latest value 11.") as its semantics content description — override with contentDescription; empty values describe themselves as "Line chart with no data".