Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chart examples · Bar

A horizontal bar chart for React

A bar chart laid out horizontally, with the months on the vertical axis.

Framework
UI library

Use horizontal bars when the categories have long names or the chart is a ranking. layout="vertical" on BarChart turns the bars sideways, the Y axis lists the months, and the X axis that carries the values is hidden.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

What turns the bars sideways?

BarChart sets layout to vertical. YAxis is type category with dataKey month, and XAxis is type number with dataKey desktop. XAxis also sets hide, so the number scale stays off the chart.

How are the month labels shortened?

YAxis sets tickFormatter to formatMonth, which returns value.slice(0, 3), so January renders as Jan. axisLine and tickLine are false, and tickMargin is 10.

Why is the left margin negative?

BarChart sets margin to { left: -20 }, which pulls the category ticks toward the plot. Bar uses dataKey desktop, fill var(--color-desktop), and radius 5.

Where does the bar color come from?

config sets desktop to the label Desktop and color var(--chart-1). ChartContainer writes --color-desktop, and Bar fills with that variable.

What does the tooltip show?

ChartTooltipContent sets hideLabel, and cursor is false. The series name is Desktop from config, and the value is that row's desktop count.

Can the bars be reached from the keyboard?

Yes. BarChart sets accessibilityLayer. This demo draws no CartesianGrid. The month ticks and the tooltip are the text next to the bars.

All 70 chart examples