Shadcn.io is not affiliated with official shadcn/ui
React Bar Chart with Negative Values
Bar chart supporting positive and negative values with color coding
React Bar Chart with Negative Values preview
Not every metric stays above zero. This React bar chart handles negative values naturally, with bars extending below the baseline and colored differently from positive bars. The Cell component enables per-bar coloring based on value: green for gains, red for losses. Month labels appear above each bar via LabelList for quick identification. Built with Recharts and shadcn/ui, this pattern is essential for profit/loss statements, temperature anomalies, NPS scores, or any Next.js dashboard showing data that swings both positive and negative.
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-negative chart into my projectRelated Components
Simple Bar Chart
Positive values only
Bar Chart with Labels
Add value labels
Simple Line Chart
Line chart with negative support
Multiple Bar Chart
Compare multiple series
Simple Area Chart
Area with negative values
Stacked Bar Chart
Stack positive values
FAQ
Was this page helpful?
Sign in to leave feedback.