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.
The import and the props worth knowing about, in one place.
import { LineChart } from "@/components/beste/component/line-chart";
<LineChart
xKey="day"
config={{
thisMonth: { label: "This month", color: "var(--chart-1)" },
lastMonth: { label: "Last month", color: "var(--chart-2)" },
}}
data={[
{ day: "1 Jan", thisMonth: 5200, lastMonth: 4300 },
{ day: "8 Jan", thisMonth: 6100, lastMonth: 5200 },
]}
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { LineChart } from "@/components/beste/component/line-chart";
<LineChart
xKey="day"
config={{"thisMonth":{"label":"This month","color":"var(--chart-1)"},"lastMonth":{"label":"Last month","color":"var(--chart-2)"}}}
data={[{"day":"1 Jan","thisMonth":5200,"lastMonth":4300},{"day":"8 Jan","thisMonth":6100,"lastMonth":5200},{"day":"15 Jan","thisMonth":12324,"lastMonth":5563},{"day":"22 Jan","thisMonth":9800,"lastMonth":7100},{"day":"29 Jan","thisMonth":11200,"lastMonth":8600}]}
/>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 line at that point. |
|---|
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: { visitors: { label, color } } |
xKey* | string | — | Category (x-axis) field |
curve | "natural" | "linear" | "monotone" | "step" | — | |
dots | boolean | — | Render a dot on each data point |
showGrid | boolean | — | |
showYAxis | boolean | — | |
showLegend | boolean | — | |
className | string | — |
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.
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.