AreaChart

data is one object per x position with one field per series — the wide shape your API already returns, so nothing needs melting into long form first.

categoryKey sets which field on each row is its x value.

series is field names, or { key, label, color } objects when the legend needs better words than your column names. Order assigns the default colours and, when stacked, the band order — so put the series that needs reading accurately first, since only the bottom band keeps a flat baseline.

ariaLabel sets what the chart shows, in one sentence. Required — an unlabelled chart is an unreadable one.

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

variant decides what the stack means. stacked sits the bands on each other so the top edge is the total — usually the question an area chart is being asked. normalized stacks to a full 100% at every position, turning it into a share-over-time read where the total disappears. overlapped starts every band at zero so they share a baseline; readable for two or three series and no more.

curve sets how the top edge gets between points. smooth is monotone cubic — it rounds corners without bulging past a value the data never contained.

line strokes the *top* edge of each band only — not an outline around the fill, which would trace the baseline and sides too and turn a stack into a set of boxes. Turn it off for a softer read.

gradient fades each band out toward its baseline, so it reads as weight under the line rather than as a solid slab. Separate from variant on purpose — painting and stacking are different questions, and any variant can be gradient-filled.

fillOpacity applies to the flat fill under each line. Drop it when the bands overlap and you need to see through them; it does nothing under a gradient fill.

xLabel names what the x ticks are counting, for the cases the surrounding copy doesn't.

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. Anything you can draw in SVG goes in it — a boxed initial here, an icon or an <image> just as easily.

yTickSize is the same for the y-tick slot, and on the left axis it *is* the margin — a tick drawing its own content leaves no text for the chart to estimate a width from. Size it for the widest thing you draw, formatted label included.

valueFormat covers the y ticks and the tooltip together, so a formatted axis can never disagree with the panel beside it. A normalized chart formats its own axis as percentages and ignores this for the ticks, since the numbers there are shares rather than amounts.

categoryFormat rewrites the x tick labels without touching your data — how a key like 2025-03 becomes Mar.

xType decides whether the x values are names or quantities. A category axis gives every row an equal slot, so six samples taken at ragged intervals come out evenly spaced and the band's shape is a fiction. number places each one where its value falls, and the widths become 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 — 1.25 where the sample was taken at 1:15.

xMin holds the left end of a numeric axis at a value no row reaches. It's yMax's counterpart on the other axis, and gives way the same way: a row further left still widens the scale rather than being drawn outside the plot.

xMax does the same at the right end, and the pair is what makes the band a timeline: midnight to noon, with the samples where they landed and the quiet stretches drawn at their real width.

xTicks names the ticks outright, for when the scale's idea of a round number isn't yours — every three hours here rather than the 0, 2, 4 the arithmetic prefers.

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

yMax holds the y axis open to a number the data needn't reach — quota used against the whole quota, where the space left is the point. Without it the band always tops out at the plot's edge, which makes 62% and 98% of a quota look the same.

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

animate is on by default: the bands rise out of the baseline on the first draw and ease 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, and off for one — a single band needs no key. Force it off when the surrounding heading already names what's plotted.

legendPosition moves the key above or below the plot. top reads as part of a heading when the chart sits directly under one.

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 long labels their own line, at the cost of height.

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 bands 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 and the margins they reserve, so the bands fill the box. That plus a small height is the sparkline shape — an area sparkline reads as volume where a line reads as direction.

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.

loading is a skeleton at the chart's exact height. An empty data array gets the empty state instead — both hold the height, so a dashboard doesn't reflow as its panels resolve.

The category under the pointer, or null once it leaves — for driving a readout, a linked row, or a second chart scrubbing alongside this one.