shadcn.io is not affiliated with official shadcn/ui
About
Turn bars sideways when the category names are long, when there are many of them, or when the list reads as a ranking. Names stay on one line and the longest bar stands out. For a time series, the vertical version reads more naturally.
Six bars with 5px corners extend from the left edge, one per month, with the month's name beside each. There's no value axis and no grid: the lengths and the tooltip carry the values.
Installation
Usage
import { ChartBarHorizontal } from "@/components/charts/chart-bar-horizontal";<ChartBarHorizontal />Customize
layout="vertical"on<BarChart>lays the bars horizontally: Recharts names the layout after the category axis.<YAxis dataKey="month" type="category">lists the months, and<XAxis dataKey="desktop" type="number" hide />scales the lengths without drawing an axis.margin={{ left: -20 }}pulls the bars into the space the short labels leave free; raise it for longer names.<Bar dataKey="desktop" fill="var(--color-desktop)" radius={5} />draws the bars.
FAQ
How are the bars turned sideways?
With layout="vertical" on <BarChart>. Recharts names the layout after the category axis, which runs vertically, so the bars run horizontally. The category then goes on <YAxis type="category"> and the value on <XAxis type="number">.
How do I fit longer category names?
Remove the tickFormatter that cuts names to three letters, and raise margin.left on <BarChart> (it's -20 here) or set a width on <YAxis> so the names have room.
How do I sort the bars by value?
Sort chartData before the chart reads it, for example [...chartData].sort((a, b) => b.desktop - a.desktop). The bars follow the order of the rows.
How do I print each value at the end of its bar?
Put <LabelList dataKey="desktop" position="right" offset={8} className="fill-foreground" /> inside <Bar>, and add a right margin so the numbers fit.
API Reference
ChartContainer
configChartConfig
Each series by its data key: its label, an icon, and a color (or a * theme color per light and dark), read by the tooltip and legend and set * as --color-<key>.
initialDimension?{ height: number; width: number; }
The size it renders at before it's measured, so the first paint isn't * empty.
- Type
{ height: number; width: number; }- Default
INITIAL_DIMENSION
className?string
Merged with the part's classes.
ChartLegend
ChartLegendContent
<div>
hideIcon?boolean
Hides each series' icon (from config), leaving its color swatch.
- Default
false
nameKey?string
The key in each legend item's data to look its label up by in config. * Defaults to the item's dataKey.
className?string
Merged with the part's classes.
ChartStyle
<style>
configChartConfig
The chart config whose colors it writes as --color-<key> variables.
idstring
The element's id.
ChartTooltip
ChartTooltipContent
<div>
hideIndicator?boolean
Hides each item's color indicator.
- Default
false
hideLabel?boolean
Hides the tooltip's label, the hovered point's.
- Default
false
indicator?"dashed" | "dot" | "line"
The color indicator's shape: a dot, a line or dashed.
- Type
"dashed" | "dot" | "line"- Default
"dot"
labelFormatter?(label: any, payload: TooltipPayload) → React.ReactNode
Formats the tooltip's label; its value is untyped, as in recharts 3.8.
- Type
(label: any, payload: TooltipPayload) → React.ReactNode- Parameters
label– anypayload– TooltipPayload- Returns
React.ReactNode
labelKey?string
The key in the data to read the label from, looked up in config.
nameKey?string
The key in each item's data to look its name up by in config.
className?string
Merged with the part's classes.
Related
Bar Chart with Custom Labels
Bar chartsHorizontal bars with the name inside each bar and the value after it.
Mixed Bar Chart
Bar chartsHorizontal bars, each category in a color of its own.
Bar Chart
Bar chartsOne series of rounded vertical bars, a month each.
Bar Chart with Labels
Bar chartsEach bar's value printed above it.
Radial Chart with Labels
Radial chartsRadial bars with each browser's name written at its start.
Multiple Bar Chart
Bar chartsTwo series grouped side by side for each month.