shadcn.io is not affiliated with official shadcn/ui
Distribution Card Histogram Stats Block for React
A 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.
Installation
Overview
A distribution chart for React with Base UI. A start-aligned header states the median ("Half of requests answer within 135 ms"), and one framed figure draws ten 50 ms buckets of response times as columns with a smoothed density curve over them: a Gaussian kernel across the readings, scaled to requests per bucket and drawn as a monotone curve that never invents a peak. Two markers run the full height, the median as a solid line and the mean as a dashed one, so the long tail that pulls the mean past the median can be seen; from sm each carries a label, one on each side of its line. Under the figure a band that runs from rail to rail gives the mean, the median and the 90th percentile as rolling numbers with a line of meaning each. The buckets, the density, the mean, the median and the percentile are all derived at module scope from one typed list of readings, and a visually hidden table holds the buckets. It's built from SlidingNumber and Guides, in your theme's foreground colour.
FAQ
How do I change the readings?
Edit READINGS at the top of the file: each reading is a response time in milliseconds and how many requests took it. SPAN is the chart's width in ms and WIDTH the bucket's; SMOOTH is how wide the kernel that smooths the curve is. The buckets, the curve, the axis, the mean, the median and the 90th percentile are all computed from the list.
What is the curve?
A density estimate: every reading adds a bell of its count, as wide as SMOOTH, and the sum is scaled to requests per bucket so it shares the columns' axis. It is drawn as a monotone cubic through 51 points and stretched with vector-effect: non-scaling-stroke, so the line keeps its width. It is a smoothing of the same readings, not a different data set.
How do the median and mean differ on the chart?
The median is a solid line, the mean a dashed one, so they differ in shape and not only in position, and the legend under the chart says so. With a long tail the mean sits to the end side of the median; the band says by how much. On a phone the labels on the chart are dropped and the legend and band carry them.
Is the chart accessible?
Yes. The drawing is hidden from assistive technology; the chart has an accessible name that gives the span, the median, the mean and the 90th percentile, and a visually hidden table inside the figure lists every bucket. The three figures are a description list in text. The chart box is dir="ltr" because time runs from the start to the end in every language.
Related
- 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
Percentile Markers Histogram Stats
DistributionsSixteen latency bins in a neutral fill with vertical markers at the median, the 95th and the 99th percentile, labelled at alternating heights, and a list of the three values in the header.
- 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
Stacked Bins Histogram Stats
DistributionsA 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.
- Pro
Box Plot Stats
DistributionsFive box plots of delivery times on one shared axis in a band that runs from rail to rail, each with a whisker, a box for the middle half, a median line, hollow outlier dots and the median at the row's end.
- Pro
Area Chart With Reference Area Stats
Area and lineAn area chart of alert delivery time with the incident drawn as a shaded window between two hairlines, and three rows beside it: how long it lasted, the peak delay and the alerts it touched.