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.

A series' dashed and points override this chart's own line style and dots for that one line — a projection that shouldn't read as an actual reading, drawn dashed with no dots, next to the real figures drawn solid with theirs.

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.

xTickSize is the box the x-tick slot draws into, and the room reserved for it below the plot. The slot takes whatever SVG you hand it — an icon, a logo, or two lines of text where one would have crowded, as here. It gets x and y for the box's centre and box for the rect itself.

yTickSize is the same for the y-tick slot, taken out of the left margin instead — where the number is the whole margin, since a tick drawing its own content has no text for the chart to estimate a width from. Marking the axis rather than each point is what keeps a unit out of six labels.

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.

xType decides whether the x values are names or quantities. A category axis gives every row an equal slot, so four readings taken at 4:43, 5:34, 8:00 and 11:25 come out evenly spaced — the three-hour gap before 8:00 looking the same as the fifty minutes before 5:34. number places each one where its value falls, and the gaps become part of the reading.

xFormat is categoryFormat for a numeric axis: it takes the number and returns the label, on the ticks and in the tooltip's title. Without it the axis prints the raw quantity — 4.717 where the reading was taken at 4:43.

xMin holds the left end of a numeric axis at a value no row reaches — the shift starts at midnight whether or not anyone took a reading then. It's yMin's counterpart and gives way the same way: a row further left still widens the axis.

xMax does the same at the right end. The pair is what turns four readings into a timeline: 0 to 12 draws the whole morning, the readings sit where they happened, and the empty stretches read as time nobody measured.

xTicks names the ticks outright, for when the scale's idea of a round number isn't yours. Every three hours here — left alone the axis ticks at 0, 2, 4 and so on, which is round arithmetic and the wrong grid for a clock.

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.

yMin holds the bottom of the y axis at a value the data needn't reach — a 1–5 satisfaction score read on the 1–5 scale it was collected on, rather than on the narrow band the six weeks happen to occupy. A reading below it still widens the axis.

yMax does the same at the top, and the pair is what fixes a scale outright — every chart of the same measure drawn on the same axis, so two of them can be compared side by side instead of each being scaled to its own best week.

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

animate is on by default: the lines rise out of the floor on the first draw and bend from old values to new. Roll new values to compare it with the chart on the right, which has it off. Only the marks move — axes, tooltips and labels always read the real numbers — and a reader who has asked their system for reduced motion gets no motion either way.

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.

legendGroup names a group that a standalone UiChartLegend with the same group belongs to, so the legend can sit anywhere — here above the plot — and still dim the other lines while you hover an entry. The chart hands the legend its entries, colors included, so it needs no items. Switch the chart's own legend off if you don't want two.

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.