shadcn.io is not affiliated with official shadcn/ui
Chart examples · Bar
A bar chart for React
A bar chart with rounded corners comparing one value across six months.
The starting point for comparing one value across a few categories. Six months of desktop visitors are drawn as vertical bars with rounded corners over horizontal grid lines, the axis shows short month names, and the tooltip shows the hovered month's count.
Preview
Installation
FAQ
How are the bar corners rounded?
Bar sets radius to 8, so every corner of the desktop bars is rounded by 8px. The series is dataKey desktop, filled with var(--color-desktop).
Where does the bar color come from?
config gives desktop the label Desktop and color var(--chart-1). ChartContainer writes that as --color-desktop, which is what fill reads.
How are the month ticks shortened?
XAxis uses dataKey month and tickFormatter set to formatMonth, which returns value.slice(0, 3). axisLine and tickLine are off, and tickMargin is 10.
Why are the grid lines horizontal only?
CartesianGrid sets vertical to false, so the plot shows horizontal lines. BarChart also sets accessibilityLayer, which lets the bars be reached from the keyboard.
Related
- A multiple bar chartA bar chart grouping desktop and mobile
- A horizontal bar chartA bar chart laid out horizontally, with
- A bar chart with a labelA bar chart with each bar's value printed
- A simple area chartA single-series area chart with a smooth
- A line chartA line chart drawing one series as a
- A stacked bar chart with a legendA bar chart stacking desktop and mobile