Shadcn UI Chart Card Block
ChartCard13 is a diverging bar chart showing positive and negative values. Bars extend upward from a zero reference line for gains and downward for losses. Each bar is colored based on its sign, with a horizontal line marking the zero baseline.
Light card surface with positive bars using the primary chart color and negative bars using a contrasting color. A subtle reference line marks zero. All bars have rounded corners on all edges since they can extend in either direction. The Y-axis shows currency values with negative numbers below zero.
This chart pattern is essential for profit/loss displays, net change tracking, or any metric that can be positive or negative. The color coding makes it immediately clear which periods were gains versus losses. The zero line provides a clear visual anchor for comparison.
Tooltips indicate whether each value is a gain or loss. The chart handles the asymmetric nature of diverging data gracefully.
Dependencies
| Package | Type |
|---|---|
| recharts | NPM |
| react | NPM |
card @shadcn | Registry |
chart @shadcn | Registry |