Skip to main content
AreaChart fills the region between a line and the axis, emphasizing the magnitude of values over time. It supports stacking, which makes it easy to show how parts contribute to a whole. See Charts for the shared data, series, and formatting model.

​
Basic Usage

​
Stacked

Stacking shows how each series contributes to the total. The topmost line represents the combined value.

​
Minimal

Set show_grid=False to drop the background gridlines. Without them the filled area reads as a single glanceable shape — a good fit for compact trend cards where the silhouette matters more than reading exact values off an axis.

​
Smooth

Set curve="smooth" for gently curved lines between data points. The filled area follows the curve.

​
Step

Set curve="step" to connect points with step-shaped lines. The filled area follows the stepped edges.

​
Value Formatting

Use value_format to format numeric values on the value axis and in tooltips. It accepts the same pipe strings as Prefab expressions and data table columns, including currency, currency:EUR, percent:1, and compact:0.

​
API Reference

AreaChart Parameters

​
list[dict] | str
required
Data as a list of dicts, or a {{ field }} interpolation reference.
​
list[ChartSeries]
required
Series definitions — each becomes a filled area on the chart.
​
str | None
default:"None"
Data key for x-axis labels.
​
int
default:"300"
Chart height in pixels.
​
bool
default:"False"
Stack areas on top of each other.
​
Literal["linear", "smooth", "step"]
default:"\"linear\""
Interpolation curve between data points.
​
bool
default:"False"
Show a dot at each data point.
​
bool
default:"False"
Show a legend below the chart.
​
bool
default:"True"
Show tooltips on hover.
​
bool
default:"True"
Show horizontal grid lines.
​
bool
default:"True"
Show the y-axis with its tick labels. Set to False for a compact, axis-free reading where the shape matters more than exact values.
​
str
default:"\"auto\""
Format value-axis ticks and tooltip values with an expression pipe such as currency, currency:EUR, percent:1, or compact:0.
​
str | None
default:"None"
Additional Tailwind CSS classes.

ChartSeries Parameters

​
str
required
Data field to plot — must match a key in the data dicts.
​
str | None
default:"None"
Display label for legends and tooltips. Defaults to the data_key value.
​
str | None
default:"None"
CSS color override. By default, colors cycle through the theme’s chart palette (--chart-1 through --chart-5).

​
Protocol Reference

AreaChart
ChartSeries
For the complete protocol schema, see AreaChart, ChartSeries.