Recharts area chart on the shadcn ChartContainer: multi-series with per-series gradient fills, optional stacking, grid, y-axis, legend, and a theme-aware tooltip. Config-driven colors via --chart tokens.
The import and the props worth knowing about, in one place.
import { AreaChart } from "@/components/beste/component/area-chart";
<AreaChart
xKey="month"
stacked
config={{
revenue: { label: "Revenue", color: "var(--chart-1)" },
orders: { label: "Orders", color: "var(--chart-2)" },
}}
data={[
{ month: "Jan", revenue: 4200, orders: 2400 },
{ month: "Feb", revenue: 3800, orders: 2100 },
]}
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Hover the plot | The tooltip follows the pointer and reads every series at that point. |
|---|---|
| Tab | Reaches the chart; the tooltip is not the only way to the numbers, since the series are also in the legend. |
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
data* | Array<Record<string, string | number>> | — | |
config* | ChartConfig | — | Series config keyed by data field: { revenue: { label, color } } |
xKey* | string | — | Category (x-axis) field |
stacked | boolean | — | Stack the areas instead of overlaying them |
curve | "natural" | "linear" | "monotone" | "step" | — | Smooth ("natural") vs straight ("linear") curves |
showGrid | boolean | — | |
showYAxis | boolean | — | |
showLegend | boolean | — | |
className | string | — |