LineChart

A value over an ordered sequence — time, almost always.

One line per series, drawn on from the left when it mounts, with an optional 12% wash underneath. Hovering anywhere in the plot snaps a crosshair to the nearest category and opens a tooltip listing every series at that point, so the reader compares values at one x rather than eyeballing two curves. The same works from the keyboard: the plot is one tab stop, arrows walk the categories, and each step is announced. Every number is also in a visually-hidden table, which is the accessible representation — a screen reader gets the data, not a description of a picture. Two or more series always get a legend; click one to mute it. The table sits inside a clipped box: a table grows to fit its content whatever width it is given, so on its own it would widen a phone page.

Charts · keyboard contract

<script lang="ts">
	import { LineChart } from '@l4st/driftwood';
</script>

Light	Dark

Props

Prop	Type	Default	What it does
series required	ChartSeries[]	—	One entry per line. Each data array is read in categories order.
categories required	string[]	—	The x axis, in order. Labels are thinned automatically when they crowd.
area	boolean	false	Wash the area under each line. Best with one or two series.
smooth	boolean	true	Monotone cubic instead of straight segments — smooth, and never overshoots.
height	number	220	Plot height in pixels; the width follows the container.
min	number	—	Force the y floor. Defaults to a rounded value at or below the data.
max	number	—	Force the y ceiling.
format	(value: number) => string	compact	Formats every value: axis, tooltip and table. Defaults to compact (1.2k).
ticks	number	4	Roughly how many horizontal gridlines to aim for.
legend	boolean	true	Hide the legend even with several series. The table view still names them.
categoriesLabel	string	'Category'	Heads the category column of the screen-reader table — what the categories are ('Month', 'Day').
aria-label required	string	—	Names the chart, and captions the table. Required.
class	string	—	Merged with the component's own classes, last — so yours win.

Keyboard

Key	Does
← / →	move the crosshair between categories
Home / End	first / last category
Escape	drop the crosshair

Example

The markup behind the screenshot above, lifted from src/routes/shots/ — so it compiles, and it is exactly what produced the image.

<LineChart
	series={[
		{ label: 'Indexed', data: [820, 932, 901, 934, 1290, 1330, 1320] },
		{ label: 'Skipped', data: [220, 182, 191, 234, 290, 330, 310] }
	]}
	categories={['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}
	area
	categoriesLabel="Day"
	aria-label="Files indexed and skipped per day"
/>

Notes

ChartSeries

type ChartSeries = {
	/** Names the series in the legend, the tooltip and the table view. */
	label: string;
	/** One value per category, in `categories` order. `null` is a gap, not a zero. */
	data: (number | null)[];
	/** Overrides the palette slot, e.g. `'var(--chart-3)'` or `'var(--success)'`. */
	color?: string;
};

Colour

A series takes the --chart-N slot at its own index and keeps it, so a filter that removes one series never repaints the others. The five slots are validated as an ordered set — each neighbouring pair stays apart under simulated protanopia and deuteranopia — which is why a sixth series does not get a generated hue: group the tail into an "Other" instead, or facet the chart.

Pass color only for a series whose meaning is fixed, such as an error count that should always be var(--destructive).

Two things it will not do

• No second y axis. Two measures of different scale are two charts, small multiples, or both indexed to a common base — never two scales in one frame.
• No number on every point. The axis, the legend and the tooltip carry the values; the visually-hidden table carries all of them exactly.

Charts · BarChart · DonutChart · ShareBar · Heatmap · Gauge · Sparkline · ChartLegend

---

← All components · Getting started · Theming · source