Area Chart
Token-driven area chart built on Recharts v3 with gradient fills, stacking, single and multi-series support, and full light/dark theming via chart tokens.
Playground
Installation
pnpm add @tessinaui/ui rechartsUsage
import { AreaChart } from "@tessinaui/ui";
import type { ChartConfig } from "@tessinaui/ui";
const config: ChartConfig = {
desktop: { label: "Desktop", color: "var(--chart-1)" },
mobile: { label: "Mobile", color: "var(--chart-2)" },
};
const data = [
{ month: "Jan", desktop: 186, mobile: 80 },
{ month: "Feb", desktop: 305, mobile: 200 },
{ month: "Mar", desktop: 237, mobile: 120 },
];
<AreaChart data={data} config={config} categoryKey="month" />Series colours come from the --chart-1 … --chart-6 tokens, referenced as
var(--chart-N) in each config entry. They are brand-led, contrast-checked
in both modes, and recolour automatically when the theme flips — no JS re-render.
Examples
Default
A single series with the softest natural curve and a brand-tone gradient fill.
Multiple Series
Two series in brand tones with a legend; the areas overlap rather than stack.
Stacked
Two series stacked into a cumulative area, with each solid contour separating the bands.
Expanded
Three series normalised to 0–100% proportional bands with expand.
Curve
linear joins points with straight segments; step holds each value until the next.
States
The loading skeleton and the empty state shown side by side.
Theming
Every colour resolves to a Tessina token — nothing is hardcoded:
| Element | Token |
|---|---|
| Series fill / stroke | --chart-1 … --chart-6 (via config[key].color) |
| Grid + axis lines | border |
| Axis tick labels | muted-foreground |
| Tooltip surface | popover / popover-foreground / border |
To re-skin a series, change the token reference in config (e.g. color: "var(--chart-3)")
or override the --chart-N token in your theme.
Accessibility
- Recharts'
accessibilityLayeris on: keyboard arrow keys move through data points and a screen-reader description is provided. - Animation respects
prefers-reduced-motion: reduce. - Colour is never the only differentiator — pair multi-series with markers, dashed strokes
(
dashedSeries), or direct labels.
Core props
| Prop | Type | Default | Description |
|---|---|---|---|
data | Record<string, string | number | null>[] | — | Row-per-category data. |
config | ChartConfig | — | Series metadata (label, color). |
categoryKey | string | — | Datum key for the x-axis. |
series | string[] | all config keys | Which series to plot. |
curve | "monotone" | "linear" | "step" | "monotone" | Interpolation. |
stacked | boolean | false | Stack series cumulatively. |
fillOpacity | number | 0.25 | Top stop opacity of the gradient fill. |
size | "sm" | "md" | "lg" | "md" | Aspect ratio. |
showGrid / showLegend / showXAxis / showYAxis / showTooltip / showDots | boolean | — | Toggle chart chrome. |
dashedSeries | string[] | [] | Series keys rendered with a dashed stroke. |
dir | "ltr" | "rtl" | "ltr" | Reading direction. |
loading | boolean | false | Render the skeleton. |
error | ReactNode | — | Render an error message instead of the chart. |
emptyState | ReactNode | "No data to display" | Shown when data is empty. |
AlertDialog
Blocking confirmation dialog for destructive or critical actions. Built on Base UI's alert-dialog primitive with role="alertdialog", focus trap, and explicit-action-only dismissal — the user must choose Confirm or Cancel.
AspectRatio
Constrains content to a specific width/height ratio using CSS aspect-ratio. Seven named presets, arbitrary string or numeric ratios, eight corner-radius presets, automatic object-fit on single media children, and polymorphic render.