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 },
]}
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { AreaChart } from "@/components/beste/component/area-chart";
<AreaChart
xKey="month"
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},{"month":"Mar","revenue":5100,"orders":2900},{"month":"Apr","revenue":4700,"orders":2600},{"month":"May","revenue":6200,"orders":3400},{"month":"Jun","revenue":7400,"orders":3900}]}
/>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 | — |
Recharts line chart on the shadcn ChartContainer: multi-series lines with configurable curve, optional dots, active-dot hover, grid, y-axis, legend, and a theme-aware tooltip. Config-driven colors via --chart tokens.
Recharts bar chart on the shadcn ChartContainer: grouped or stacked multi-series bars with rounded corners, optional grid, y-axis, legend, and a dashed-indicator tooltip. Config-driven colors via --chart tokens.
Recharts radar chart on the shadcn ChartContainer: multi-series polar areas with a polar grid, angle axis, adjustable fill opacity, optional legend, and a theme-aware tooltip. Config-driven colors via --chart tokens.