/// Charts
LineChart
A monochrome-plus-signal line chart over the shared --pds-chart-N ramp, recharts-backed.
import { LineChart } from "@protocore/pds";Import path
LineChart ships from the `@protocore/pds/charts` subpath — not the main entry — so recharts stays out of the core bundle. recharts (>=3) is an optional peer; install it in apps that render charts.
import { LineChart } from "@protocore/pds/charts";
import { ChartContainer } from "@protocore/pds";Basics
Give it data, an xKey, and one or more series. The defaults are the house style: a hairline horizontal grid, mono muted ticks, no axis lines, 1.5px strokes, no per-point dots, and a square active dot on hover. Wrap it in a ChartContainer for the frame and the ramp.
Multiple series
List several series in draw order; each resolves to the next --pds-chart-N slot. Because the ramp is monochrome-plus-signal, the first (ink) series reads as the lead and the rest recede — pair with a legend so readers can map lines to labels.
When to use it
Use LineChart for a continuous series over an ordered x-axis — time, block height, sequence — where the *rate and direction of change* is the story. For volume-under-a-curve emphasis, use AreaChart; for discrete category comparison, BarChart; for an axis-free glanceable trend, Sparkline.
Rank your series and lean on the ramp: keep supporting lines greyscale and reserve the signal hues for the line that carries meaning (see the doctrine on ChartContainer). Every prop beyond data/series/xKey/height is forwarded to the underlying recharts <LineChart>.
Usage
Do
- Wrap it in a ChartContainer so it inherits the `--pds-chart-*` ramp.
- Give each series a human `label` for the tooltip and legend.
- Keep the ink series (chart-1) as the primary metric and let others recede.
- Use a categorical/time `xKey`; sort your data by it before passing.
Don't
- Don't render it outside a ramp source without pinning `--pds-chart-*` yourself.
- Don't give every line a bright color — the ramp is a rank, not a rainbow.
- Don't import it from `@protocore/pds`; it lives on the `/charts` subpath.
- Don't plot unordered categories on the x-axis — use BarChart instead.
Accessibility
- recharts renders the plot as SVG; provide surrounding context (a ChartContainer `label`, a caption, or a data table) for assistive tech, as the marks themselves are not individually labelled.
- The default tooltip appears on keyboard focus and hover via recharts; series stay distinguishable by luminance, not hue alone, thanks to the monochrome ramp.
- Pair multi-series charts with a legend so line identity does not rely on color perception.
LineChart props
| Prop | Type | Default | Description |
|---|---|---|---|
data * | ReadonlyArray<Record<string, string | number | null | undefined>> | — | Row-oriented data; each datum keyed by `xKey` and by every series `key`. |
series * | ChartSeries[] | — | Series to plot, in draw + legend order. `ChartSeries` = `{ key: string; label?: string; color?: string }` — color defaults to `--pds-chart-N` by position. |
xKey * | string | — | Datum key for the x-axis category. |
height | number | 240 | Chart height in px. |
...rest | Omit<RechartsLineChartProps, 'data' | 'children' | 'width' | 'height' | 'ref'> | — | Remaining props spread onto the underlying recharts `<LineChart>` (e.g. `margin`, `syncId`, `layout`). |