Components / Charts

LineChart

Line, area, stacked and 100% stacked area charts: dates or numbers on x, gaps for missing values, direct labels, crosshair tooltip, table view.

@ruckc/truss-chart Charts

Import

import { LineChart } from '@ruckc/truss-chart';
import '@ruckc/truss-chart/charts.css'; // series palette

Playground

API

Prop	Type	Default	Description
x required	(number | Date)[]	—	Shared x positions: numbers or Dates.
series required	Series[]	—	Max 8 (fixed-order palette, never cycled). Fold extras into "Other" upstream.
title	string	—	Heading text.
subtitle	string	—	Secondary text under the title.
height	number | 'fill'	240	Plot height in px (default 240), or `'fill'` to size to the container's height. `'fill'` measures the parent with a ResizeObserver, so the parent needs a definite height (e.g. `height: 360px`, or a grid/flex track with a fixed size). A parent with `height: auto` collapses to the 120px minimum.
area	boolean	false	Fill the area under each line.
stacked	boolean | 'percent'	false	Only meaningful with `area`. `true` stacks the series; `'percent'` normalises each x to 100%. Missing values count as 0 in a stack; tooltips and the table show the raw values.
zeroBaseline	boolean	false	Ensures 0 is inside the y-domain. It does not draw a line at 0: add `referenceLines={[{ value: 0 }]}` for that.
directLabels	boolean	true	Name labels at line ends when ≤ 4 series.
yFormat	(n: number) => string	fmtValue	Formats value-axis numbers and tooltip values.
xFormat	(x: number | Date) => string	—	Formats x values (a Date when `x` holds Dates) for axis ticks, tooltip and table. Default: number or date-aware short format.
band	Band	—	A chart-level shaded envelope drawn behind the lines (e.g. a confidence or min/max range). `lo` and `hi` align with `x` by index; `null` in either leaves a gap. It widens the y-domain, appears in the tooltip and table as `lo – hi` under `label` (default "Band"), and uses `color` (default: the first series' colour). Ignored when `stacked` is on.
referenceLines	ReferenceLine[]	[]	Emphasised, labelled horizontal lines. Their values widen the y-domain; they are also announced in the chart's accessible name and listed under the table view.
xScale	'linear' | 'log'	'linear'	`'log'` plots x on a base-10 log axis with ticks at powers of 10. Points with x <= 0 are dropped (not drawn, not in the tooltip or table). Ignored for Date x values.
yScale	'linear' | 'log'	'linear'	`'log'` plots y on a base-10 log axis with ticks at powers of 10. Values <= 0 (including band and reference values) are treated as missing and shown as an em dash; area fills run down to the axis minimum. `stacked` is ignored (series draw independently).