Area
Gradient areas, bands between two values, and stacked areas.
An area chart is a line with a filled region below it. Use it to emphasize volume or magnitude over time, to show a range as a band, or to stack the parts of a total.
"use client";
import { ChartCanvas, formatCompact, Pane } from "@reincharts/core";
import { AreaSeries } from "@reincharts/series";
import { Grid, XAxis, YAxis } from "@reincharts/axes";
import { Crosshair, LastValueLabel } from "@reincharts/coordinates";
import { Legend } from "@reincharts/tooltip";
import { traffic, type TrafficDay } from "@/lib/data-general";
import { useDocsChartTheme } from "@/lib/use-docs-theme";
export default function AreaExample() {
const theme = useDocsChartTheme();
return (
<ChartCanvas data={traffic} theme={theme} barSpacing={3}>
<Pane>
<Grid />
{/* the gradient is derived from the line color */}
<AreaSeries<TrafficDay> name="Sessions" y="sessions" color="#3b82f6" />
<LastValueLabel />
<YAxis tickFormat={(t) => formatCompact(t.value)} />
<Legend />
</Pane>
<XAxis />
<Crosshair />
</ChartCanvas>
);
}Usage
<AreaSeries /> // close, theme gradient
<AreaSeries y="value" color="#10b981" /> // gradient derived from the line color
<AreaSeries y="value" fill="rgba(0,0,0,0.1)" /> // solid fill
<AreaSeries y="value" lineWidth={0} /> // area onlyBy default the area fills down to the bottom of the pane. Set base to fill to a constant value instead (for example
0 for a chart with negative values).
Bands
y0 sets a per-point bottom edge, which turns the area into a band: a high / low range, a confidence interval, or the
fill between two indicator lines.
Stacked areas
<StackedAreaSeries ys={[...]}> stacks several values per datum (bottom layer first). offset="percent" normalises
every stack to 100%. Positive values stack upwards and negative values downwards. The stack() helper exposes the same
computation for your own series.