AreaChart

stable

Filled area chart for cumulative and stacked treasury data — liquidity buffers, stacked funding sources

import { AreaChart } from "@nodus/design-system/finance"

Liquidity Buffer — H1 2026

30 Jun 2026

Available LiquidityReserve Buffer

Loading demo…

Props

Prop	Type	Default	Description
`data`req	`Record<string, number \| string>[]`	—	Data rows
`xKey`req	`string`	—	Key for x-axis labels
`yKey`req	`string \| string[] \| AreaSeries[]`	—	Series key(s) to plot
`stacked`	`boolean`	—	Stack areas additively
`showLegend`	`boolean`	—	Show series legend

datarequired

Type Record<string, number | string>[]Default —

Data rows

xKeyrequired

Type stringDefault —

Key for x-axis labels

yKeyrequired

Type string | string[] | AreaSeries[]Default —

Series key(s) to plot

stacked

Type booleanDefault —

Stack areas additively

showLegend

Type booleanDefault —

Show series legend

MobileStacks / Scroll

Chart requires min 300px width for legible axis labels. Wrap in overflow-x-auto with min-w-[300px] on the chart container.

Design Rationale

This component was designed to express:

Multi-series SVG line chart for time-series and trend data — cash forecasts, FX history, AI confidence trends

Inline SVG micro-chart for trend visualization in table cells

Was this helpful?