Line Chart

Charts

Shows trends over a continuous axis.

Line charts emphasize direction and rate of change. Use one for time-series data where the shape of the trend matters more than individual values.

npx shadcn@latest add line-chart

Default

A smooth line with dots and a shared tooltip.

Preview

Live

tsx

1<LineChart data={conversionsByDay} xKey="day" yKey="conversions" height={220} />

Custom

A filled, dotless line in an accent color.

Preview

Live

tsx

1<LineChart
2  data={activeUsersByHour}
3  xKey="hour"
4  yKey="users"
5  color="var(--color-chart-3)"
6  height={220}
7  withDots={false}
8  fillArea
9/>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
data	Record<string, unknown>[]	The data rows to plot.
xKey	string	The key used for the horizontal axis.
yKey	string	The key used for the line values.
color	string= "var(--color-primary)"	The line stroke color.
height	number= 240	The chart height in pixels.
strokeWidth	number= 2	The line thickness.
withDots	boolean= true	Whether to render points at each value.
fillArea	boolean= false	Fills the area under the line with a soft gradient.