Shadcn.io is not affiliated with official shadcn/ui
Stats Bar Chart With Target Line
A bar chart stats card for React and Next.js with a horizontal ReferenceLine target threshold, per-bar Cell colors for above/below target, a ChartContainer-wrapped Recharts BarChart, and tabular-nums summary row built with shadcn/ui and Tailwind CSS
Track progress against a daily target with this bar chart stats card for React and Next.js. Features a ChartContainer-wrapped Recharts BarChart with per-bar Cell fills (emerald above the target, amber below), a horizontal ReferenceLine with a label marking the quota, a CartesianGrid with horizontal-only dashed lines, ChartTooltipContent, and a summary footer showing days hit versus days missed. Built with TypeScript, ChartContainer from shadcn/ui, Recharts BarChart + ReferenceLine + Cell, motion/react parent entrance, Lucide React icons, and Tailwind CSS. Perfect for sales quota dashboards, support team SLO monitors, fitness step trackers, and manufacturing throughput boards.
Related Components
React Stats Block Horizontal Bar Chart
Horizontal bar card
React Stats Block Vertical Bar Chart
Vertical bar card
React Stats Block Weekly Bar Chart
Weekly breakdown bars
React Stats Block Line With Threshold
Line chart with reference
React Stats Block Threshold Progress
Threshold-aware progress
React Stats Block Percentile Histogram
Histogram with markers
FAQ
Was this page helpful?
Sign in to leave feedback.
Bar Chart Weekly Breakdown
A 7-day vertical bar chart stats card for React and Next.js with Mon-Sun day-of-week labels, today's bar highlighted via Recharts Cell fills, a ChartContainer-wrapped BarChart and tabular-nums weekly total built with shadcn/ui and Tailwind CSS
Before After Card
A before-and-after comparison stats card for React and Next.js with a left before value, centered delta callout, right NumberFlow animated after value, and a mini-timeline footer built with shadcn/ui and Tailwind CSS