Area Chart

Filled area for visualising volume and cumulative data over time. Supports overlapping, stacked, and percentage stacking modes.

Examples

data*

Record<string, string | number>[]

Array of data objects, one per x-axis point.

index*

string

Key used as the x-axis label.

categories*

string[]

Keys to render as area series.

colors= palette

string[]

Override chart palette colours for this instance.

curveType= 'monotone'

'linear' | 'monotone' | 'step'

Interpolation style between data points.

stack= 'none'

'none' | 'stack' | 'expand'

none = overlapping areas, stack = stacked absolute, expand = stacked 100%.

fillOpacity= 0.15

number

Opacity of the filled area (0–1). The gradient fades to 0 at the bottom.

valueFormatter= —

(value: number) => string

Format values on the y-axis and in the tooltip.

showLegend= auto

boolean

Show series legend. Auto-shown when categories.length > 1.

showGrid= true

boolean

Show a horizontal background grid.

height= 300

number

Fixed height of the chart in px.

className= —

string

Extra class on the outer container.

Prop	Type	Default	Description
data*	Record<string, string \| number>[]	—	Array of data objects, one per x-axis point.
index*	string	—	Key used as the x-axis label.
categories*	string[]	—	Keys to render as area series.
colors	string[]	palette	Override chart palette colours for this instance.
curveType	'linear' \| 'monotone' \| 'step'	'monotone'	Interpolation style between data points.
stack	'none' \| 'stack' \| 'expand'	'none'	none = overlapping areas, stack = stacked absolute, expand = stacked 100%.
fillOpacity	number	0.15	Opacity of the filled area (0–1). The gradient fades to 0 at the bottom.
valueFormatter	(value: number) => string	—	Format values on the y-axis and in the tooltip.
showLegend	boolean	auto	Show series legend. Auto-shown when categories.length > 1.
showGrid	boolean	true	Show a horizontal background grid.
height	number	300	Fixed height of the chart in px.
className	string	—	Extra class on the outer container.