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.

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.

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

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

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.

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.