LineChart
Time-series or numeric line chart with multi-series support, hover tooltip, and legend.
Category: chart · WCAG 2.1-AA · chart, line, time-series, data-viz
Props
| Prop | Type | Default | Description |
|---|---|---|---|
series | LineChartSeries<Datum>[] | — | Array of data series |
x | (d: Datum) => number | Date | — | X-value accessor. Return a `number` for a numeric axis or a `Date` for a time axis (ticks format as dates). This is a continuous scale — unlike BarChart, whose `x` returns a category `string` (band scale). For discrete categories, use BarChart. |
y | (d: Datum) => number | — | Y-value accessor, applied to every series unless a series sets its own `y`. One x-domain per chart, so `x` is chart-level only; give each series a `y` to plot different fields from one shared data row. |
title | string | — | Chart title (also used as aria-label) |
description | string | — | Subtitle shown below title |
curve | 'linear' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter' | 'natural' | 'basis' | 'cardinal' | 'catmullRom' | monotone | Line interpolation curve |
width | number | — | Fixed SVG width (defaults to container width) |
height | number | 300 | SVG height in px |
xTicks | number | 5 | Approximate number of X-axis ticks |
yTicks | number | 5 | Approximate number of Y-axis ticks |
legend | boolean | — | Show series legend |
tooltip | boolean | — | Enable hover tooltip |
formatTooltip | (datum: Datum, series: LineChartSeries<Datum>) => string | — | Custom tooltip formatter |
className | string | — | Additional CSS class names merged onto the root element. |
plain | boolean | false | Marks only — no axes, grid lines, or legend. For micro/inline charts. |
annotations | Annotation[] | — | Reference lines, shaded bands, and markers drawn over the plot (e.g. a target/threshold line). |
labels | boolean | { format?: (v: number) => string; position?: string } | — | Print each value as a label on the mark (collision-aware, decorative/aria-hidden). |
connectNulls | boolean | false | Bridge non-finite y gaps instead of breaking the line at them. |
onSelect | (point: ChartPoint) => void | — | Fired when a point is clicked or activated (Enter/Space) — for drill-down. |
brush | boolean | false | Show a keyboard-operable Brush below the plot to subset (zoom) the series to a window. |
dataZoom | boolean | false | Show a DataZoom slider below the plot — a Brush whose body also pans the window. |
zoom | boolean | false | Enable in-plot wheel/drag/keyboard zoom-pan (+/-/0) over the series index window, with a reset control and re-ticked axes. |
syncId | string | — | Connect this chart to others sharing the same id — they mirror the zoom window and hovered x. |
tooltipMode | 'item' | 'axis' | item | Tooltip trigger — item (nearest point) or axis (a crosshair + a shared tooltip listing every series at the hovered x). |
decimate | boolean | { method?: 'lttb' | 'minmax'; threshold?: number } | — | Downsample dense series before drawing (LTTB or min-max). Visual only — the fallback table keeps the full data. |
toolbox | boolean | ToolboxOptions | — | Render a keyboard-reachable toolbox — PNG/SVG export, a data-view table toggle, and restore (reset zoom). |
transition | boolean | { duration?: number; easing?: string; properties?: string[] } | — | Tune the reduced-motion-gated enter/update transitions (false disables). Always suppressed under prefers-reduced-motion. |
onBeforeDraw | (ctx: { width: number; height: number }) => ReactNode | — | Render custom SVG behind the marks (watermark/region) — a lightweight extension seam. |
onAfterDraw | (ctx: { width: number; height: number }) => ReactNode | — | Render custom SVG over the marks (overlay/extra series) — a lightweight extension seam. |
Design tokens
--cascivo-chart-1--cascivo-chart-2--cascivo-chart-3--cascivo-chart-4--cascivo-chart-5--cascivo-chart-6--cascivo-chart-7--cascivo-chart-8
When to use
- Showing trends and precise values over continuous time or a numeric range
- Comparing the trajectory of multiple series on a shared scale
When not to use
- Comparing discrete categories — use BarChart
- Emphasising cumulative volume — use AreaChart
Examples
Basic line chart
import { LineChart } from '@cascivo/charts'
const series = [{ id: 'a', label: 'Revenue', data: [{x:1,y:10},{x:2,y:20},{x:3,y:15}] }]
<LineChart series={series} x={d => d.x} y={d => d.y} title="Revenue" />With an SLO target line
<LineChart
series={series}
x={d => d.x}
y={d => d.y}
title="Latency"
annotations={[{ kind: 'line', axis: 'y', value: 200, label: 'SLO' }]}
/>