Simple
A line chart with area fill, grid lines, data-point markers, and categorical X-axis labels, rendered on a Compose Canvas.
Data points from data are plotted left-to-right in list order and connected with straight line segments. The area beneath the line is filled with a semi-transparent fillColor. Each point is marked with a two-tone circle (outer pointColor, inner surface color) for visibility.
The Y axis auto-scales to the data range with 10 % padding above and below. Negative values are clamped to zero for drawing, so the axis floor never drops below zero; non-finite values (NaN, ±Infinity) are excluded from the scale and skipped in drawing. The accessibility description always reflects the original values. Horizontal grid lines carry formatted value labels on the left margin; labels use a locale-neutral one-decimal format.
X-axis labels are automatically thinned to approximately maxLabelCount visible entries (always including the last point) to avoid overlap on dense datasets.
When data contains fewer than two finite points, emptyLabel is drawn at the chart center instead of a line.
On first composition points animate upward from the baseline (see animate); the area fill follows the same animated points. 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
Ordered data points to plot.
Leading text for the combined accessibility description (e.g. "Fuel efficiency trend").
Text displayed at the chart center when data has fewer than two finite entries.
Modifier applied to the outer Canvas.
Stroke color of the connecting line. Defaults to MaterialTheme.colorScheme.primary.
Semi-transparent color filling the area between the line and the X axis. Defaults to primary at 10 % alpha.
Outer ring color of each data-point marker. Defaults to MaterialTheme.colorScheme.primary.
Color of horizontal grid lines. Defaults to MaterialTheme.colorScheme.outlineVariant.
Total height of the chart area. Defaults to DefaultStylishDimensions.lineChartHeight.
Thickness of the connecting line. Defaults to 2.5 dp.
Outer radius of each data-point circle. Defaults to 4 dp.
Inner (surface-colored) radius of each data-point circle, creating a ring effect. Defaults to 2 dp.
Text size for axis and category labels. Defaults to 10 dp.
Number of horizontal grid lines including top and bottom. Defaults to 5.
Maximum number of X-axis labels rendered. Labels are evenly sampled; the last data point's label is always included. Defaults to 6.
When true, points animate from the baseline to their target Y positions on first composition using tween(StylishTheme.animation.durationMedium). When false, the chart appears instantly. Defaults to true.