LineChart

data keeps rows in the wide shape your API already returns — one object per x position, one field per series. No reshaping, no melting into long form.

categoryKey sets which field on each row is its x value. Everything else in the row is a candidate series.

series is field names for the quick case, or { key, label, color } when the legend needs better words than your column names. Order assigns the palette slots, so keep it stable across renders.

ariaLabel sets what the chart shows, in one sentence. Required — an unlabelled chart is an unreadable one, and it's the only thing a screen reader has to go on.

ariaDescription is the detail the label shouldn't carry — the trend, the outlier, the thing a sighted reader gets from the shape.

curve says what happens between two samples. linear joins them and claims nothing else. smooth is monotone cubic — it rounds corners without bulging past a value the data never contained. The three step variants say the value held and then jumped, which is what a price, a setting or a plan tier actually did: step-after holds until the next sample, step-before jumps first, step splits the difference. Reach for a step curve whenever “between two samples” has no meaning.

points marks the real samples. Worth turning on whenever the series is sparse enough that a reader might mistake the line for continuous measurement.

strokeWidth is the line's thickness in pixels. Raise it for a line that has to hold up in a dense dashboard; lower it to step a comparison series back behind a busier one.

xLabel names what the x ticks are counting, for the cases the surrounding copy doesn't. Drawn dimmed where the ticks are muted — the reader needs it once, and the ticks continuously.

yLabel is the same, for the value axis.

valueFormat formats the y-axis ticks and the tooltip values together, so the two can never disagree.

categoryFormat rewrites the x tick labels without touching your data — how a key like 2025-03 becomes Mar while the rows keep their real values.

grid is the horizontal rules from the y ticks. Dropping them keeps the axes and their labels.

zeroBaseline is off by default: a trend line reads best against its own range, and anchoring to zero flattens exactly the variation the chart exists to show. Turn it on when the reader is meant to compare magnitudes and the distance to zero is part of the answer.

tooltip is the crosshair and the panel that follows it, dropped together.

legend is on by default from two series up. Force it off when the surrounding heading already names what's plotted.

legendPosition moves the key above the plot with top — useful when the chart sits directly under a heading and the legend reads as part of it.

legendAlign places the key horizontally. start lines it up with the plot's left edge, which is where the eye already is after reading the axis.

legendOrientation flows the entries in a row or a column. vertical gives each series its own line — what long labels, or a value printed beside each label, want.

guides drops the axes, ticks, labels and grid *and* the margins they reserve, so the line fills the whole box. That plus a small height is the inline sparkline, for a stat tile or a table cell.

height is the plot's height in pixels. Ignored once aspectRatio is set.

aspectRatio sizes the chart from its container's width instead of a fixed height — so it keeps its proportions across breakpoints. Resize the preview to watch it hold.

loading swaps in a skeleton of exactly the chart's height, so nothing around it moves when the data lands. An empty data array gets the empty state instead, also at full height.

Fires with the category under the pointer, and null when it leaves. The chart already shows a tooltip; this is for driving something *outside* it — a readout in a card header, a linked table row, a second chart scrubbing in step with this one.