Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chart examples · Bar

A mixed bar chart for React

A horizontal bar chart with a different color for each browser.

Framework
UI library

Use it to compare categories that each have their own color. The bars run horizontally, each browser's row carries its fill, and the Y axis shows the browser names from the chart config.

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 does each bar get a different color?

Each row sets fill to a variable such as var(--color-chrome). config maps chrome, safari, firefox, edge, and other to --chart-1 through --chart-5. Bar sets dataKey to visitors and radius to 5, and leaves fill to the row.

What makes the bars horizontal?

BarChart sets layout to vertical and margin to { left: 0 }. YAxis is type category with dataKey browser. XAxis is type number with dataKey visitors and hide.

How do the ticks get names like Chrome?

YAxis sets tickFormatter to formatBrowser, which returns chartConfig[value].label, or the raw key when that label is missing. axisLine and tickLine are false, and tickMargin is 10.

What does the tooltip show?

ChartTooltipContent sets hideLabel, and cursor is false. The name comes from the browser key in config, and the value is visitors. config also labels visitors as Visitors.

Can I reach the bars from the keyboard?

Yes. BarChart sets accessibilityLayer. The browser labels in config are the same strings formatBrowser prints on the axis.

What order are the bars in?

The rows run Chrome 275, Safari 200, Firefox 187, Edge 173, and Other 90. With layout vertical, that array order is the category order down the chart.

All 70 chart examples