Shadcn.io is not affiliated with official shadcn/ui
Stats Histogram Log Scale
A log-scale histogram stats card for React and Next.js with a ChartContainer-wrapped Recharts BarChart using YAxis scale='log' to visualize wide dynamic range distributions built with shadcn/ui and Tailwind CSS
Visualize wide dynamic range distributions with this log-scale histogram stats card for React and Next.js. Features a ChartContainer-wrapped Recharts BarChart with a log-scale YAxis at ticks 1, 10, 100, 1k, 10k, CartesianGrid horizontal dashed lines, ChartTooltipContent for per-bucket counts, percentile summary chips, and a log-scale legend note. Built with TypeScript, ChartContainer from shadcn/ui, Recharts BarChart with YAxis scale='log', motion/react parent entrance, Lucide React info icon, and Tailwind CSS. Perfect for API latency histograms, request size distributions, log level frequency boards, and anomaly detection dashboards.
Related Components
React Stats Block Histogram Distribution
Linear histogram card
React Stats Block Histogram Count Buckets
Bucketed count histogram
React Stats Block Histogram Percentiles
Histogram with markers
React Stats Block Histogram Stacked
Stacked bin histogram
React Stats Block Bar Vertical
Vertical bar chart card
React Stats Block Log Frequency
Log frequency table
FAQ
Was this page helpful?
Sign in to leave feedback.
Histogram Distribution Card
A histogram distribution stats card for React and Next.js with a ChartContainer-wrapped Recharts BarChart of ten bucketed bars across the X axis, a muted var(--chart-2) fill, a tight 160px chart body, and a mean summary header built with shadcn/ui and Tailwind CSS
Histogram Stacked Bins
A stacked-bin histogram stats card for React and Next.js with bucketed BarChart bars subdivided by stackId into three request-size segments, a 180px fixed chart body, and ChartLegendContent pills built with shadcn/ui and Tailwind CSS