Charts
Area Chart
Build area charts to display quantitative data with filled regions
Area charts display quantitative data with the area between the axis and the line filled with color. They are ideal for showing magnitude of change over time.
Simple Area Chart
A basic area chart with a single data series.
Stacked Area Chart
Use stack-id to stack areas on top of each other.
Gradient Area Chart
Define <linearGradient> inside the chart and reference it with fill="url(#gradientId)".
Step Area Chart
Use type="step" for step-wise transitions.
Area Chart with Legend
Add <Legend> to show series labels.
Change curve type
Set the type prop on <Area> to control interpolation:
| Type | Description |
|---|---|
monotone | Smooth curve preserving monotonicity |
linear | Straight line segments |
step | Step-wise transitions |
natural | Natural cubic spline |
basis | B-spline curve |
AreaChart props
| Prop | Type | Default | Description |
|---|---|---|---|
data | Array | [] | Data array for the chart |
width | number | — | Chart width (use ResponsiveContainer for responsive) |
height | number | — | Chart height |
margin | object | { top: 5, right: 5, bottom: 5, left: 5 } | Chart margins |
layout | 'horizontal' | 'vertical' | 'horizontal' | Layout direction |
syncId | string | — | Sync hover across charts with same ID |
stack-offset | string | — | Stack offset type (expand for 100% stacked) |
Area props
| Prop | Type | Default | Description |
|---|---|---|---|
dataKey | string | number | Function | required | Key from data to plot |
type | CurveType | 'linear' | Curve interpolation type |
fill | string | '#3182bd' | Fill color |
stroke | string | '#3182bd' | Stroke color |
fillOpacity | number | 0.6 | Fill opacity |
stackId | string | — | Stack ID for grouping |
hide | boolean | false | Hide the area |
connectNulls | boolean | false | Connect across null values |
isAnimationActive | boolean | true | Enable animation |
transition | AnimationOptions | { duration: 0.8, ease: 'easeOut' } | Animation timing (motion-v) |