shadcn.io is not affiliated with official shadcn/ui
Chart examples · Bar
A bar chart with a custom label for React
A horizontal bar chart with the month inside each bar and its value at the end.
Use it when the labels should be readable without a hover, in a report or on a slide. The bars run horizontally with the Y axis hidden: one LabelList writes the short month inside the start of each bar and a second prints the value just past its end. The tooltip uses a line indicator.
Preview
Installation
FAQ
How does the month name end up inside the bar?
The first LabelList uses dataKey month, position insideLeft, offset 8, and fontSize 12. Its className is fill-(--color-label). config sets that label color to var(--background), so the month matches the page background and reads on the bar.
How is the number placed at the end of the bar?
A second LabelList uses dataKey desktop, position right, the same offset and fontSize, and className fill-foreground. BarChart sets margin to { right: 16 } so those numbers stay inside the frame.
What makes the bars horizontal?
BarChart sets layout to vertical. YAxis is type category with dataKey month, and XAxis is type number with dataKey desktop. Both axes set hide.
Do the inside labels use the short month names?
No. The inside LabelList prints month with no formatter, so the text is January and the rest of the full names. formatMonth, which slices to three characters, is only passed to the hidden YAxis.
Related
- A bar chart with a labelA bar chart with each bar's value printed
- A horizontal bar chartA bar chart laid out horizontally, with
- A mixed bar chartA horizontal bar chart with a different
- A bar chartA bar chart with rounded corners
- A multiple bar chartA bar chart grouping desktop and mobile
- Basic Data Table with CheckboxesA table of products with a checkbox on