shadcn.io is not affiliated with official shadcn/ui
About
Pick it for a compact ranked list in a card: no axes to read, the name and the number sit on the bar itself. Short names suit it, since each one has to fit inside its bar. For long names, the plain horizontal chart keeps them beside the bars.
Six bars run to the right with 4px corners and faint vertical grid lines behind them. Each shows its month in the background color at the start, and its value in the foreground color just past the end.
Installation
Usage
import { ChartBarLabelCustom } from "@/components/charts/chart-bar-label-custom";<ChartBarLabelCustom />Customize
- Two
<LabelList>elements sit inside<Bar>:dataKey="month" position="insideLeft"for the name anddataKey="desktop" position="right"for the value, both atoffset={8}. - The name's
className="fill-(--color-label)"readschartConfig.label, whosecolorisvar(--background). <YAxis hide>and<XAxis hide>keep the scales without drawing them, and<CartesianGrid horizontal={false} />draws vertical guides.margin={{ right: 16 }}leaves room for the values past the longest bar.
FAQ
How do the month names stay readable on the bars?
chartConfig.label sets color: "var(--background)", and the name's <LabelList> reads it with className="fill-(--color-label)". Check the contrast if you pick a light bar color.
What if a name doesn't fit inside its bar?
Pass a formatter to the name's <LabelList> that shortens it, or drop that <LabelList> and show the <YAxis> instead, as the Horizontal Bar Chart does.
How do I make room for longer values?
Raise margin.right on <BarChart>: the values sit past the bars, outside the plot area.
Can I add a third label, such as a share?
Yes. Add a third <LabelList> with its own position (center, insideRight) and a formatter that computes the share.
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
Horizontal Bar Chart
Bar chartsHorizontal bars with the categories down the side.
Bar Chart with Labels
Bar chartsEach bar's value printed above it.
Mixed Bar Chart
Bar chartsHorizontal bars, each category in a color of its own.
Line Chart with Custom Labels
Line chartsEach point labeled with its category's name, in its color.
Pie Chart with Custom Labels
Pie chartsSlice labels drawn outside the pie in the foreground color.
Bar Chart
Bar chartsOne series of rounded vertical bars, a month each.