Chart

Bar, Line, and Area charts built from Compose Canvas — no external charting library.

Overview

The chart family ships three Composables — BarChart, LineChart, and AreaChart — that share the same axis system, animation pipeline, and tap‑and‑drag tooltip ("scrub"). All three are drawn directly into a Canvas, so there is no external charting dependency.

Each chart takes a list of strongly‑typed series (BarSeries, LineSeries, AreaSeries) whose points carry a string x category and a Float y value. Axis behavior — gridlines, tick count, tick formatting, optional y‑domain override — is configured through a single ChartAxisOptions value.

Common parameters across the three charts:

chartHeight: Dp = 220.dp — fixed plot height. Required to be a fixed value; do not rely on parent Modifier.height(...) alone.
animate: Boolean = true — first‑composition reveal (bars grow up, lines/areas sweep left → right).
showTooltip: Boolean = true — press‑and‑drag the plot to scrub through categories.
showLegend: Boolean = false — render a legend row beneath the plot.
scrollable: Boolean = false — when true, the plot scrolls horizontally and each x‑category is given at least minColumnWidth (default 56.dp). The y‑axis stays pinned. Tooltips are force‑disabled in scrollable mode.

Bar Chart

A vertical bar chart supporting one or more grouped series. Bars animate from baseline to their target height on first composition.

Grouped (multi-series)

Pass more than one BarSeries and bars are drawn side‑by‑side per x‑category. barWidthFraction controls how much of each category slot the bar group occupies (default 0.7f).

With value labels

Set showValueLabels = true to draw the formatted y‑value above each bar after the grow‑in animation completes. The label uses axisOptions.yLabelFormatter.

Scrollable

Enable scrollable = true for dense data sets. The plot scrolls horizontally, the y‑axis stays pinned, and each x‑category is given at least minColumnWidth of room. Drag‑scrub tooltips are disabled in this mode so the gesture goes to the scroller.

Line Chart

A line chart that connects points with cubic Bézier segments by default (smooth = true). The stroke sweeps in from left to right on first composition.

Multi-series with legend

Scrollable, multi-series

Set scrollable = true for dense time series. The y‑axis stays pinned, and each x‑category is given at least minColumnWidth of room. Drag‑scrub tooltips are disabled in this mode.

Area Chart

An area chart renders a stroked line over a filled region down to the baseline. By default the fill is a vertical gradient from the series color (40% alpha at top) to transparent at the baseline.

Flat fill

Disable the gradient with gradientFill = false and control opacity via fillAlpha.

Multi-series

When multiple area series overlap, lower the fillAlpha (or keep gradientFill = true) so both series remain visible.

Axis options

Every chart accepts a ChartAxisOptions to tune gridlines, tick density, and label formatting. The defaults show the y‑axis labels, a horizontal grid, the x‑axis labels, and a 4‑tick y‑axis derived from the data.

import com.komoui.components.charts.ChartAxisOptions
 
LineChart(
    series = series,
    axisOptions = ChartAxisOptions(
        showHorizontalGrid = true,
        showVerticalGrid = true,
        yTickCount = 5,
        yDomain = 0f..400f,
        xLabelFormatter = { it.uppercase() },
        yLabelFormatter = { "$${it.toInt()}" },
    ),
    chartHeight = 240.dp,
)

Parameter	Default	Description
`showX`	`true`	Show x‑axis tick labels.
`showY`	`true`	Show y‑axis tick labels in a pinned canvas on the left.
`showHorizontalGrid`	`true`	Draw dashed horizontal gridlines at each y‑tick.
`showVerticalGrid`	`false`	Draw dashed vertical gridlines at each x‑category.
`yTickCount`	`4`	Approximate number of y‑ticks (including 0 and the "nice" max).
`yDomain`	`null`	Optional override for the y‑axis range; when `null`, computed from the data.
`xLabelFormatter`	identity	Transforms raw x labels before rendering.
`yLabelFormatter`	compact (`K`, `M`)	Transforms numeric y‑values into tick labels.

Tooltips & scrubbing

When showTooltip = true (the default), pressing anywhere on the plot snaps a vertical indicator to the nearest x‑category and reveals a tooltip card with every series' value for that column. Continuing to drag horizontally moves the indicator; releasing dismisses it.

The scrub gesture is claim‑on‑down — it consumes the first pointer event so the tooltip appears instantly under the finger, without a touch‑slop delay. This is intentional but means it cannot coexist with Modifier.horizontalScroll, which is claim‑after‑touch‑slop. The chart resolves this by force‑disabling tooltips whenever scrollable = true. If you need both in the same chart, switch to a long‑press‑then‑scrub or tap‑only gesture (see the source Chart.md for the trade‑offs).

Edit this page on GitHub