LineChart
PreviewSVGPublishes selection
Shows how one or more measures change over a continuous dimension, usually time. Use it for trends; reach for a bar chart when the categories are discrete.
Playground
Daily active users
Sep 7 – Oct 6, 2026
Users from Sep 7 to Oct 6: up 9.2%, from 12,328 to 13,468. Low 10,039 on Sep 13; high 13,891 on Oct 5.
| Date | Users | Previous |
|---|---|---|
| Sep 7 | 12,328 | 11,475 |
| Sep 8 | 12,286 | 11,815 |
| Sep 9 | 12,671 | 11,868 |
| Sep 10 | 12,765 | 11,932 |
| Sep 11 | 12,280 | 11,449 |
| Sep 12 | 10,193 | 9,710 |
| Sep 13 | 10,039 | 9,331 |
| Sep 14 | 12,290 | 11,754 |
| Sep 15 | 12,770 | 11,729 |
| Sep 16 | 13,060 | 11,661 |
| Sep 17 | 13,198 | 11,857 |
| Sep 18 | 12,754 | 12,166 |
| Sep 19 | 10,347 | 9,839 |
| Sep 20 | 10,080 | 9,640 |
| Sep 21 | 12,699 | 12,022 |
| Sep 22 | 13,106 | 11,697 |
| Sep 23 | 12,641 | 11,907 |
| Sep 24 | 12,721 | 12,248 |
| Sep 25 | 13,563 | 12,202 |
| Sep 26 | 10,194 | 9,824 |
| Sep 27 | 10,522 | 9,569 |
| Sep 28 | 13,436 | 12,288 |
| Sep 29 | 12,871 | 11,809 |
| Sep 30 | 13,738 | 12,659 |
| Oct 1 | 13,087 | 12,323 |
| Oct 2 | 13,275 | 11,944 |
| Oct 3 | 10,909 | 10,196 |
| Oct 4 | 10,476 | 9,675 |
| Oct 5 | 13,891 | 12,391 |
| Oct 6 | 13,468 | 12,451 |
curve
<LineChart
data={daily}
x="date"
y="users"
curve="monotone"
area
compare="users_previous"
legend
/>Installation
LineChart is exported from @quartile/react, alongside every other chart and component.
git clone https://github.com/zinnoberHaus/quartileNot on npm yet: build the package from the clone as described in Installation. The preview API may change before publication.
Usage
Pass rows and name the fields. Types, formats and axis labels come from the data's schema, so most charts need three props. Rows that share an x value are summed, so raw rows work.
import { LineChart } from '@quartile/react';
// One precomputed distinct-user count per day.
type DailyUsers = { date: string; users: number };
export function ActiveUsers({ rows }: { rows: DailyUsers[] }) {
return <LineChart data={rows} x="date" y="users" />;
}Inside a
<Selection>, LineChart filters itself by every predicate except its own brush, and with brush publishes the dragged range as a between predicate on x. See Linked selections.Props
PropTypeDefaultDescription
datarequiredDataInput<R>—Rows to plot, or a dataset with a schema attached.
xrequiredkeyof R & string—Continuous field for the horizontal axis. Dates are detected from the schema.
yrequired(keyof R & string) | (keyof R & string)[]—One or more measures. Pass an array for multiple series.
colorkeyof R & string—Splits rows into series by a categorical field.
comparekeyof R & string—Field holding comparison values, drawn as a dashed series with deltas in the tooltip.
compareLabelstring'Previous'Label for the comparison series.
curve'linear' | 'monotone' | 'step'Curve'monotone'Interpolation between points. Monotone never overshoots the data.
areabooleanfalseFills below the line with a fading gradient.
pointsboolean | 'hover''hover'Marks every point, or only the hovered one.
brushbooleanfalseLets readers select a range and publishes it to the nearest Selection.
formatFormatter—Formats the y axis and tooltip values. Defaults to the field's schema format.
xFormatFormatter—Formats the x axis. Defaults to the field's schema format.
annotations{ x: unknown; label: string }[]—Vertical markers with a short label, e.g. a pricing change.
legendboolean—Shows a legend above the plot. Defaults to true when there is more than one series.
idstring—Publisher id for the selection. Defaults to a generated id.
selectionstring | false—Selection to read from and publish to. Defaults to the nearest; false opts out.
onSelect(predicate: Predicate | null) => void—Called when a brush or keyboard selection changes.
Frame and state props shared with the charts (11) · ChartBaseProps, ChartStateProps
PropTypeDefaultDescription
heightnumber240Plot height in px. Width always fills the container.
classNamestring——
styleCSSProperties——
aria-labelstring—Accessible name. A summary of the data is generated and rendered as hidden text inside the figure.
view'chart' | 'table'—
table renders the same data as a table, with the same formats, at the chart's size. Large lazy tables expose a data-view control rather than mounting every hidden row.tooltipNotestring—Plain-text context shown with tooltips and included in the accessible chart description.
loadingboolean | string—Shows the loading state at the chart's size, so the layout never jumps.
errorboolean | string | Error | null—Shows the error state. A string or Error becomes the message.
errorCodestring—Shown in the error state; copyable for support.
onRetry() => void——
empty{ title?: string; description?: string; action?: ReactNode }—Title and description for the empty state. Shown when there are no rows.
Accessibility
Keyboard
Tab into the chart, ← → between points, Home and End to jump. With
brush, Enter or Space selects the focused point. The cursor starts on keyboard focus, not on a click.Screen readers
An auto-written summary per series: range, trend, low and high, as hidden text inside the figure. The focused point is announced as you move.
Table fallback
Screen readers always get a table of the plotted values with the same formats.
view="table" shows it at the chart's size.Report an issueBuilt Oct 21, 2026