AreaChart
Area chart with optional stacking, multi-series support, and hover tooltip.
Category: chart · WCAG 2.1-AA · chart, area, data-viz
Props
| Prop | Type | Default | Description |
|---|---|---|---|
series | AreaChartSeries<Datum>[] | — | Array of data series |
x | (d: Datum) => number | Date | — | X-value accessor. Return a number for a numeric axis or a Date for a time axis (ticks format as dates, parity with LineChart). This is a continuous scale — unlike BarChart, whose `x` returns a category `string` (band scale). For discrete categories, use BarChart. |
y | (d: Datum) => number | — | Y-value accessor, applied to every series unless a series sets its own `y`. One x-domain per chart, so `x` is chart-level only; give each series a `y` to plot different fields from one shared data row. |
title | string | — | Title text for the component. |
description | string | — | Supporting description text. |
stacked | boolean | — | Stack series areas |
curve | 'linear' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter' | 'natural' | 'basis' | 'cardinal' | 'catmullRom' | monotone | Line/area interpolation curve. |
fill | 'solid' | 'gradient' | 'pattern' | solid | Area fill style — solid, a top→bottom gradient, or a pattern. |
patternKind | 'dots' | 'lines' | 'cross' | — | Pattern motif when fill="pattern". |
width | number | — | Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks its container via a ResizeObserver; there is no correct pixel number in a responsive grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for this — charts call it internally. |
height | number | 300 | SVG height in px. Unlike `width`, height does NOT track the container — this is the knob you set to change the chart's aspect. |
xTicks | number | 5 | Approximate number of ticks on the x-axis. |
yTicks | number | 5 | Approximate number of ticks on the y-axis. |
legend | boolean | — | Whether to show the legend. |
tooltip | boolean | — | Enable hover/keyboard tooltip |
className | string | — | Additional CSS class names merged onto the root element. |
plain | boolean | false | Marks only — no axes, grid lines, or legend. For micro/inline charts. |
annotations | Annotation[] | — | Reference lines, shaded bands, and markers drawn over the plot (e.g. a target/threshold line). |
labels | boolean | { format?: (v: number) => string; position?: string } | — | Print each value as a label on the mark (collision-aware, decorative/aria-hidden). |
onSelect | (point: ChartPoint) => void | — | Fired when a point is clicked or activated (Enter/Space) — for drill-down. |
brush | boolean | false | Show a keyboard-operable Brush below the plot to subset the series to a window. |
dataZoom | boolean | false | Show a DataZoom slider below the plot — a Brush whose body also pans the window. |
zoom | boolean | false | Enable in-plot wheel/drag/keyboard zoom-pan (+/-/0) over the series index window, with a reset control and re-ticked axes. |
syncId | string | — | Connect this chart to others sharing the same id — they mirror the zoom window and hovered x. |
tooltipMode | 'item' | 'axis' | item | Tooltip trigger — item (nearest point) or axis (a crosshair + a shared tooltip listing every series at the hovered x). |
decimate | boolean | { method?: 'lttb' | 'minmax'; threshold?: number } | — | Downsample dense non-stacked series before drawing (LTTB or min-max). Visual only — the fallback table keeps the full data. |
toolbox | boolean | ToolboxOptions | — | Render a keyboard-reachable toolbox — PNG/SVG export, a data-view table toggle, and restore (reset zoom). |
Design tokens
--cascivo-chart-1--cascivo-chart-2--cascivo-chart-3--cascivo-chart-4--cascivo-chart-5--cascivo-chart-6--cascivo-chart-7--cascivo-chart-8
When to use
- Showing cumulative volume or magnitude of a trend over continuous time
- Emphasising the total of stacked multi-series values across a range
When not to use
- Reading precise individual values — use LineChart
- Comparing discrete categories — use BarChart
Examples
Basic area chart
import { AreaChart } from '@cascivo/charts'
const series = [{ id: 'a', label: 'Revenue', data: [{x:1,y:10},{x:2,y:20}] }]
<AreaChart series={series} x={d => d.x} y={d => d.y} title="Revenue" />Multiple fields from one row (per-series y)
The chart-level x/y apply to every series. To plot two fields from the same rows, give each series its own y — no need to reshape the data into separate {x,y} arrays.
import { AreaChart } from '@cascivo/charts'
const rows = [{ t: 0, requests: 100, errors: 5 }, { t: 1, requests: 120, errors: 9 }]
<AreaChart
title="Traffic"
series={[
{ id: 'req', label: 'Requests', data: rows, y: d => d.requests },
{ id: 'err', label: 'Errors', data: rows, y: d => d.errors },
]}
x={d => d.t}
y={d => d.requests}
/>Time axis (Date x)
Return a Date from x for a time axis — ticks render as dates (e.g. "Jul 10"), no need to encode day-of-month as an integer.
import { AreaChart } from '@cascivo/charts'
const data = [
{ day: new Date('2026-07-10'), y: 120 },
{ day: new Date('2026-07-20'), y: 180 },
{ day: new Date('2026-07-30'), y: 150 },
]
<AreaChart
title="Daily signups"
series={[{ id: 's', label: 'Signups', data }]}
x={d => d.day}
y={d => d.y}
/>