Stop Rebuilding UI
Previous: Bar Chart Diverging
Next: Bar Chart Horizontal Card

Stats 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

Scroll to load preview

Compare two periods month-by-month with this grouped bar chart stats card for React and Next.js. Features a ChartContainer-wrapped Recharts BarChart with two Bar elements rendering side-by-side using var(--chart-1) and var(--chart-2) fills, a CartesianGrid with horizontal-only dashed lines, ChartTooltipContent with dot indicators, ChartLegendContent below the chart, and a dual NumberFlow header pair for this-year and last-year totals. Built with TypeScript, ChartContainer from shadcn/ui, Recharts BarChart, NumberFlow animated totals, motion/react parent entrance, Lucide React icons, and Tailwind CSS. Perfect for e-commerce revenue year-over-year comparisons, quarterly budget reviews, marketing channel performance, and cohort analysis dashboards.

React Stats Block Vertical Bar

Single-series vertical bars

React Stats Block Horizontal Bar

Horizontal category ranking

React Stats Block Stacked Bar

Stacked segment breakdown

React Stats Block Diverging Bar

Positive and negative axes

React Stats Block Weekly Breakdown

Weekday category totals

React Stats Block Target Line

Reference line overlay

FAQ

Last updated on April 12, 2026

Was this page helpful?

Sign in to leave feedback.

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

Bar Chart Horizontal Card

A horizontal bar chart stats card for React and Next.js with a ChartContainer-wrapped Recharts BarChart in vertical layout, category labels on the YAxis, tabular-nums value list, and var(--chart-1) rounded bars built with shadcn/ui and Tailwind CSS