Bar Chart

Charts

Compares categories across discrete bars.

Bar charts are the go-to for comparing values across categories. Shelf bar charts support both horizontal and vertical layouts, rounded corners, and accept either { name, value } rows or any record shape via indexKey and valueKey.

npx shadcn@latest add bar-chart

Default

Vertical bars comparing monthly revenue.

Preview

Live

tsx

1<BarChart data={revenueByMonth} height={220} />

Custom

A horizontal layout with a custom key and color.

Preview

Live

tsx

1<BarChart
2  data={visitorsByWeek}
3  indexKey="week"
4  valueKey="visitors"
5  layout="vertical"
6  color="var(--color-chart-2)"
7  height={220}
8/>

API reference

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

Prop	Type	Description
data	{ name, value }[] \| Record<string, unknown>[]	The data rows to plot.
indexKey	string= "name"	The key used for the category axis.
valueKey	string= "value"	The key used for the bar values.
color	string= "var(--color-primary)"	The bar fill color.
height	number= 240	The chart height in pixels.
layout	"horizontal" \| "vertical"= "horizontal"	Orientation of the bars.
rounded	boolean= true	Rounds the leading bar corners.