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 },
]}
/>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 | — |