shadcn.io is not affiliated with official shadcn/ui
Stacked Bins Histogram Stats Block for React
A file-size histogram of seven bins stacked by kind (documents, images, video) in three foreground weights, with a Count and Share switch that turns absolute heights into 100% columns.
Installation
Overview
A stacked histogram for React with Base UI. A start-aligned header says how many files are under 10 MB ("83% of files are under 10 MB") and, at its end, a Count / Share switch. One framed chart shows seven size bins (under 1 MB, 1 to 10, 10 to 50, 50 to 100, 100 to 250, 250 to 500 and 500 MB and over), each column stacked by kind in three foreground weights: documents solid at the base, images at 55% and video at 25%, with a thin gap between segments. In Count the heights are file counts on one scale, so the large bins are only a sliver; in Share every column is normalised to 100%, so what the large files are made of can be read, and the segments and the axis animate between the two. A polite line under the chart says what the current view shows. The bins, totals and shares are derived at module scope from one typed list of readings, with shares rounded by the largest-remainder method so each bin adds to 100. It's built from SegmentGroup and Guides, in your theme's foreground colour.
FAQ
How do I change the files and bins?
Edit READINGS at the top of the file: each reading is a kind (documents, images or video), a file size in MB and how many files have it. EDGES holds the bins' upper edges in MB; the last bin is open-ended, so change grid-cols-7 to match the number of bins. The counts, totals, shares, axis and the line under the chart are computed. KINDS lists the kinds from the base of the stack up, each with its weight.
What does the switch do?
Count draws each segment as a share of a common ceiling, a step of a half power of ten above the biggest bin. Share draws it as its share of its own bin, so every column is 100% tall. The two views use the same markup, so the heights and the axis labels transition between them (and jump under reduced motion), and the line under the chart is announced politely.
How are the kinds told apart?
By weight and by order, not by hue: documents are solid at the base, images are 55% and video is 25%, with a thin gap in the page colour between segments. The legend lists them in the same order, from the base up, with each kind's file count.
Is the chart accessible?
Yes. The columns are drawn for the eye and hidden from assistive technology; the chart has an accessible name that gives every bin's total, and a visually hidden table inside the figure lists each kind's count and share per bin. The switch is a named segmented control with arrow keys and visible focus. The chart box is dir="ltr" because sizes run from small to large in every language.
Related
- Pro
Stacked Bar Chart Stats
Bar and columnTwelve weeks of support tickets stacked by priority in three foreground weights, with toggles that double as the legend: switch a priority off and the stack, the scale and every total re-read.
- Pro
Stacked Percentage Bar Stats
Parts of a wholeOne thick bar of a consultancy's week split into four segments at four weights with labels inside the wide ones, and a band of four legend cells under it; pointing at or focusing a cell brackets its segment.
- Pro
Count Buckets Histogram Stats
DistributionsAn order-value histogram of eight $25 buckets with the count above each column, the most common bucket drawn solid, the median bucket underlined and three figures above the chart: orders, the median bucket and the busiest bucket's share.
- Pro
Log Scale Histogram Stats
DistributionsA payload-size histogram on a log axis with gridlines at 1, 10, 100, 1K and 10K, ten buckets that double in size, a note that each line is ten times the one below, and p50, p90 and p99 badges tagged on their columns.
- Pro
Distribution Card Histogram Stats
DistributionsA response-time histogram of ten 50 ms buckets with a smoothed density curve over them, a solid median line and a dashed mean line, and a band of three figures under it: mean, median and 90th percentile.
- Pro
Stacked Area Chart Breakdown Stats
Area and lineA stacked area chart of weekly signups by channel in three foreground weights, with a legend of each channel's share beside it; pointing at a row or a layer keeps that layer and fades the others.