Stop Rebuilding UI
Previous: Area Chart With Reference Area
Next: Bar Chart Grouped

Stats Bar Chart Diverging

A diverging bar chart stats card for React and Next.js with Recharts BarChart rendering positive and negative bars from a zero baseline, emerald gains and red losses, a ReferenceLine at zero, and tabular-nums axis labels built with shadcn/ui and Tailwind CSS

Scroll to load preview

Compare gains and losses in one glance with this diverging bar chart stats card for React and Next.js. Features a ChartContainer-wrapped Recharts BarChart with vertical bars extending above and below a zero baseline, per-bar Cell coloring (emerald for positive, red for negative), a ReferenceLine at y=0, CartesianGrid with horizontal dashed lines, ChartTooltipContent with a dot indicator, and a compact summary header with net total and best and worst movers. Built with TypeScript, ChartContainer from shadcn/ui, Recharts BarChart with Cell, motion/react parent entrance, Lucide React icons, and Tailwind CSS. Perfect for sector performance dashboards, portfolio P&L cards, survey sentiment diffs, and AB test lift summaries.

React Stats Block Bar Chart Grouped

Grouped categorical bars

React Stats Block Bar Chart Stacked

Stacked series bar chart

React Stats Block Bar Chart Horizontal Card

Horizontal bar chart card

React Stats Block Bar Chart Weekly Breakdown

Weekly breakdown bars

React Stats Block Bar Chart With Target Line

Bar chart with target line

React Stats Block Histogram Distribution Card

Bucket distribution histogram

FAQ

Last updated on April 12, 2026

Was this page helpful?

Sign in to leave feedback.

Area Chart With Reference Area

An area chart stats card for React and Next.js with a ReferenceArea highlighting an incident window, gradient fill via var(--chart-1), and a labeled amber overlay built with shadcn/ui and Tailwind CSS

Bar Chart Grouped

A grouped bar chart stats card for React and Next.js with two side-by-side series per category via ChartContainer, dual var(--chart-1) and var(--chart-2) fills, tabular-nums hero totals, and a ChartLegendContent legend built with shadcn/ui and Tailwind CSS