Shadcn.io is not affiliated with official shadcn/ui
React Horizontal Bar Chart
Horizontal bar chart with room for long category labels
React Horizontal Bar Chart preview
Vertical bars truncate long names. This React horizontal bar chart flips the orientation with layout="vertical", letting category labels stretch as long as they need. Bars extend rightward while the Y-axis displays full names without cramping. The longest bar wins, making rankings instantly obvious. Built with Recharts and shadcn/ui, this layout is perfect for survey results, leaderboards, feature comparisons, or any Next.js dashboard where category names like "Enterprise Security Package" wouldn't fit under a vertical bar.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this chart for you — no copy-paste, no CLI:
use shadcnio to install the bar-horizontal chart into my projectRelated Components
Horizontal with Custom Labels
Add values inside and outside bars
Mixed Color Horizontal
Different colors per bar
Simple Bar Chart
Standard vertical orientation
Multiple Bar Chart
Compare series side-by-side
Stacked Bar Chart
Stack segments within bars
Bar Chart with Labels
Show values on vertical bars
FAQ
Was this page helpful?
Sign in to leave feedback.