Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React 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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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
Questions you might have
React 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
React 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