Line Chart
Responsive multi-series SVG line and area chart with smooth curves, hover crosshair tooltip, legend toggles and draw-in animation.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
LineChartProps
Also accepts all props of Omit<React.ComponentProps<"div">, "children">
| Prop | Type | Default | Description |
|---|---|---|---|
| labels* required | string[] | — | X axis labels, one per data point |
| series* required | LineChartSeries[] | — | — |
| height | number | 280 | Plot height in px |
| curve | "monotone" | "linear" | "monotone" | — |
| area | boolean | true | Fill the area under each line |
| title | string | "Line chart" | Accessible title used in the summary |
| valuePrefix | string | "" | — |
| valueSuffix | string | "" | — |
Install
$ npx shadcn@latest add https://chromotion.dev/r/line-chart.json