Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chart examples · Bar

A bar chart with a label for React

A bar chart with each bar's value printed above it.

Framework
UI library

Use it when every value should be readable at a glance, in a screenshot or a printed report. A LabelList at position="top" prints each month's count above its bar, and a top margin of 20 keeps the tallest label from being clipped. The tooltip still works on hover.

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

How are the numbers printed above the bars?

Bar wraps a LabelList with position set to top. It has no dataKey of its own, so the text is the bar's desktop value. offset is 12 and fontSize is 12.

How is the label text colored?

LabelList sets className to fill-foreground. The bars use fill var(--color-desktop) and radius 8. config maps desktop to var(--chart-1) and the label Desktop.

Why is there space above the tallest bar?

BarChart sets margin to { top: 20 }. That inset keeps the top labels inside the chart, including February's 305.

How are the month ticks shortened?

XAxis uses dataKey month and tickFormatter set to formatMonth, which returns the first three characters. axisLine and tickLine are false, and tickMargin is 10.

What does the tooltip show?

ChartTooltipContent sets hideLabel, and cursor is false. The row is still named Desktop from config, with that month's desktop value.

Can I move through the bars with the keyboard?

Yes. BarChart sets accessibilityLayer. CartesianGrid sets vertical to false, so the grid behind the bars is horizontal.

All 70 chart examples