Shadcn.io is not affiliated with official shadcn/ui
Stats Scatter Plot Card
A scatter plot stats card for React and Next.js with Recharts ScatterChart showing correlation between two metrics, quadrant reference lines at median values, labeled zones, ChartTooltip with both values, and tabular-nums axis labels built with shadcn/ui and Tailwind CSS
Explore correlation between metrics with this scatter plot stats card for React and Next.js. Features a ChartContainer-wrapped Recharts ScatterChart with XAxis and YAxis both visible, ReferenceLine vertical and horizontal at median values creating four quadrant zones, Scatter dots colored with var(--chart-1), ChartTooltipContent showing both metric values, and a compact legend identifying the quadrant zones. Built with TypeScript, ChartContainer from shadcn/ui, Recharts ScatterChart, motion/react parent entrance, and Tailwind CSS. Perfect for performance correlation dashboards, quality vs speed tradeoff visualizations, risk vs return scatter matrices, and multi-metric endpoint analysis.
Related Components
React Stats Block Bar Chart Diverging
Positive negative diverging bars
React Stats Block Histogram Distribution
Bucket distribution histogram
React Stats Block Area Dual Series
Overlapping dual area curves
React Stats Block API Usage
Endpoint stats table
React Stats Block Comparison Delta
Period comparison card
React Stats Block KPI Quad Grid
2x2 KPI tile grid
FAQ
Was this page helpful?
Sign in to leave feedback.
Revenue Funnel
A multi-stage conversion funnel stats card for React and Next.js with proportional stage bars, per-stage drop-off percentages, and an overall conversion header metric built with shadcn/ui and Tailwind CSS
Service Health Table
A service health stats table for React and Next.js with monospace service names, per-row status dots, tabular-nums uptime, response time, error rate columns, and border-b row dividers built with shadcn/ui and Tailwind CSS