Shadcn.io is not affiliated with official shadcn/ui
A bar chart with negative values
A React bar chart displaying positive and negative values with conditional Cell coloring and top labels using shadcn/ui and Recharts
Data isn't always positive—profits and losses, gains and declines, ups and downs. This React bar chart handles negative values by dynamically coloring bars using the Cell component—green for positive, red for negative. Built with shadcn/ui and Recharts, bars extend both above and below the zero baseline with LabelList showing month names on top. The conditional coloring instantly communicates performance without reading numbers. Perfect for financial dashboards, variance reports, year-over-year growth, or any metric that swings between positive and negative.
A bar chart with negative values preview
Installation
Related Components
Simple Bar Chart
Basic bars with single color
Mixed Color Bar Chart
Each bar with unique category color
Area Chart
Positive values with area fill
Multiple Bar Chart
Comparing multiple series
Line Chart
Trends across positive and negative
Stacked Bar Chart
Multiple series stacked
FAQ
Was this page helpful?
Sign in to leave feedback.
A multiple bar chart
A React grouped bar chart displaying multiple series side-by-side for direct comparison across categories using shadcn/ui and Recharts
A stacked bar chart with a legend
A React stacked bar chart with legend displaying multiple series layered vertically to show cumulative totals using shadcn/ui and Recharts