Area chart | Surflane

AvailableRecharts composition

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Compare the same example at each size and density. Switching keeps input values and selection state. Size guidance and comparisons

Chart data

Curve

Density

Legend

Legend limit

Palette

Number locale

Lock series selectionStack the seriesMinimal, for a cardLabel the high and lowSolid lines only

Pipeline activity

Six sample days. Workspace rises from 12 to 27 runs. Inventory has no measurement on October 3, so the chart leaves a gap there.

Pipeline run count (runs)

Reporting day

Focus the chart and use Left/Right to inspect points. Escape clears details. The data table includes every series.

View data table

All series are visible.

Usage

Fill amounts along time as areas, such as disk used or tokens by project, and stack them so the top of the stack is their total. The fill is an amount, so an area always rises from zero on a linear axis. Always provide a title, a factual summary, and axis names with units. Series default to brand and neutral fills, told apart by fill patterns, dashes and markers; pass palette="categorical" when color must separate categories, such as projects, or palette="extended" for a chart with more series than twelve; dashes={false} draws the tops solid. stacked adds the series into their total, which the readout names; a comparison or a plan, such as a target, draws as its line alone and stays out of the total. With xScale="time", rows sit by data[].time and an area breaks where sampling stops, or past breakAfter; curve="step" holds values sampled on change, such as disk used. references draw thresholds and target bands, and mark events and periods on the x axis. In a dashboard card, density="compact" keeps the plot, legend and floating values; minimal leaves the marks alone. Pass data as an immutable array that the caller owns.

Don't fill values far from zero, such as a price, or values orders of magnitude apart: the fill would claim an amount that isn't there. Use LineChart, with includeZero={false} or yScale="log".
Don't stack series that don't add up, such as a temperature per node. Stack only parts of a total, and draw the rest with LineChart.
Don't stack many series where you can choose: each layer rides on the ones below it, so only the lowest and the total read their own change. Keep the largest, sum the rest as Other, or use LineChart to compare their change.
Don't mix units on one axis. Use separate charts instead.
Don't replace missing values with 0. Pass null instead: the chart treats null, undefined, NaN, and Infinity as missing and breaks the area there.
Don't expect the chart to show loading, error, or retry states. Build them in the product screen.
Don't expect the description prop to be an automatically inferred analysis. It holds the caller's factual summary.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

figure → figcaption(title + summary) + legend toggle buttons + named axes + responsive Recharts ComposedChart + persistent inline value readout + details → Table.Container → full data table

Keyboard and accessibility

Tab reaches the legend buttons, the chart, and the data table toggle.
With the chart focused, Left and Right move between data points.
Enter or Space on a legend button shows or hides its series, and aria-pressed reports whether it's shown. Hidden series stay in the data table.
View data table is a native details element that Enter or Space expands. Long tables scroll on both axes. Each series header names the unit once, and the cells hold full values aligned at the end.
Escape clears the details, and an arrow key shows them again.
Pointer, touch and the arrow keys show the point's values in a box beside it, which turns to whichever side has more room and stays inside the plot. The same values fill the details region below the plot, a polite live region that never covers the marks; the box itself stays out of the accessibility tree.
Circle, square, and triangle markers and line patterns, with the fill patterns under them, tell series apart beyond color. They remain in high contrast mode.
With dashes off the markers carry that difference alone, so a chart drawn solid keeps its markers even past 40 points, where a chart drawn with dashes drops them.
Above 40 points, the plot omits markers to reduce overlap. Legend markers, line patterns, details, and the table remain.
Animation is off by default.
While the chart's room keeps changing, as while a sidebar slides or a window edge is dragged, the plot holds the width it was drawn at, clipped to the chart, and redraws once the room settles. A single change of room draws at once.
Test real assistive technology usability separately after product integration.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

// Needs recharts: npm install recharts
import { AreaChart, type ChartDatum } from '@surflane/ui/chart'

const data: ChartDatum[] = [
  { id: 'oct-1', label: 'October 1', values: { models: 412, cache: 96 } },
  { id: 'oct-2', label: 'October 2', values: { models: 438, cache: 120 } },
  { id: 'oct-3', label: 'October 3', values: { models: 451, cache: 88 } },
]
<AreaChart
  title='Disk used'
  description='Models grow from 412 to 451 GiB; the cache stays near 100 GiB.'
  xLabel='Day'
  yLabel='Disk used'
  unit='GiB'
  data={data}
  series={[
    { key: 'models', label: '/srv/models' },
    { key: 'cache', label: '/srv/cache' },
  ]}
  stacked
/>

Key API

Area chart — common wrapper props
Prop	Contract	Default
`title / description / xLabel / yLabel / unit`	required string labels, a factual summary, and a shared unit	required
`data`	readonly {id, label, values: Record<seriesKey, number \| null \| undefined>}[]; unique non-empty id	required
`series`	readonly {key, label, color?}[]; unique non-empty key; color replaces the palette's for one series	required
`series[].comparison`	a series the others are read against, such as a benchmark: muted ink at the quiet line weight, drawn under the others and out of a stack	false
`series[].planOf`	the key of the series this one plans, such as a target beside its actual: a level to reach, not an amount, so its dashed line alone, in its color and marker, at the quiet line weight, under it and out of a stack	—
`stacked`	stacks the series, so the top of the stack is their total, which the readout adds; a comparison or a plan is read against the stack, not added to it, so it draws on its own and stays out of the total	false
`curve`	linear \| step: step holds each value until the next	linear
`breakAfter`	on a time axis, the longest wait between rows an area runs across, in ms; past it the area breaks. A missing value still breaks it	twice the usual interval
`dashes`	false draws every area's top solid and leaves the markers to tell the series apart; a plan keeps its dash, which is what makes it a plan	true
`height`	finite pixel height, minimum 200 (120 when compact); 'fill' takes the container's height, as in a stretched dashboard panel, and gives the plot what the caption and legend leave, never less than the default	280 / 180 compact
`xScale / data[].time`	category spaces rows evenly by label; time places them by time (ms or Date), ticks on round times and breaks the line across a gap of more than twice the usual interval	category
`references`	readonly ({y, label, tone?} \| {from, to, label, tone?} \| {x, label, tone?} \| {xFrom, xTo, label, tone?})[]: threshold lines and bands the value axis reaches, and event lines and periods at a datum id or a time, in neutral, caution or danger. The legend names each with its value or place; inspecting a row names the events and periods at it	[]
`density`	default \| compact: compact keeps the plot, legend and floating values; caption, help and readout stay for assistive technology	default
`minimal`	the marks alone, for a trend on a card: no axes, grid, legend or axis names on screen; the readout, keyboard, references and data table stay, the axis names stay for assistive technology, and the table's disclosure shows only when keyboard focus reaches it	false
`extremes`	labels the highest and lowest value of the first shown series with its value and its row's label, such as a period's high and low	false
`legendPosition / legendLimit`	top \| bottom / how many entries the legend shows, series first, then references and the difference's sides, before folding the rest behind a "+N" popover; auto shows as many as fit one line	top / every series
`palette`	neutral \| categorical \| extended: ink with dashes and markers, twelve hues for categories, or twenty-four, the same twelve a step along the ramp, for more series than twelve; the dashes and markers step once past every twelve, so two series a dozen apart never share their color, dash and shape at once	neutral
`--surf-chart-line-width`	token: a series line's weight, which the legend's swatches follow; set it on :root for every chart, or on one chart	2
`--surf-chart-line-quiet-ratio`	token: the share of that weight a comparison or a plan draws at; 1 gives every line on the plot the same weight	0.75
`locale / formatValue`	Intl number and date locale, as the number helpers take; pass it when the server renders the chart, so its text matches the browser's / optional finite-value formatter (unit appended)	the runtime's / maximum 2 fractional digits
`hiddenSeries / defaultHiddenSeries / onHiddenSeriesChange`	controlled or uncontrolled hidden keys; callback requests the next keys	uncontrolled / []
`labels`	text the chart shows or announces: missing, empty, noSeries, showAll, keyboardHelp, values, viewTable, table, tableCaption, inspectHint, noRows, legend(title), series(label), moreSeries(count), moreEntries(count), total, high, low	English
`ChartSeriesMark`	{type, index, palette, color, comparison, plan, dashes}: a series' swatch as the legend draws it, for a key of your own; give it type='area' and the flags of the series it keys	line / neutral / dashed
`ref / className / figure props`	root HTMLElement ref and native figure attributes	optional
`Chart`	deprecated: LineChart, AreaChart and BarChart in one, picked by type='line' \| 'bar' \| 'area', taking every chart's props whether its marks read them or not	—

The table lists the common wrapper's main props. See the package type declarations for the full types.