Line Chart

FREE

Smooth or straight lines with a hover tooltip, dots and toggleable series.

Installation

Terminal

npx @bloxa/cli add line-chart
# or: npx shadcn@latest add @bloxa/line-chart

Packages installed automatically: motion

Hover for values; click the legend to hide or show a series.

Every component also accepts the props of the element it renders.

Prop	Type	Default	Description
dashed	string[]	[]	Series drawn dashed without fill (averages, targets).
data	object[]	—	Rows.
index	string	—	Key for x-axis labels.
categories	string[]	—	Numeric series keys to draw.
labels	Record<string, string>	—	Display names for series.
colors	string[]	—	Series colors; the first is the theme accent.
valueFormatter	(value) => string	—	Value format; defaults to localized numbers.
height	number	260	Height in px; width follows the container.
showLegend / showGrid / showXAxis / showYAxis / showTooltip	boolean	true	Toggle parts.
curve	"smooth" \| "linear"	"smooth"	Curve.
showDots	boolean	false	Dots.