shadcn.io is not affiliated with official shadcn/ui
Percentile Markers Histogram Stats Block for React
Sixteen 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.
Installation
Overview
A latency histogram for React with Base UI. A start-aligned header says how slow the slowest 1% of checkouts are, "The slowest 1% of checkouts take over 338 ms", with the median, the 95th and the 99th percentile as a list at its end. Under it, one framed chart: sixteen bins of 25 ms in a neutral fill, the bins from the 95th percentile up drawn darker, hairline gridlines, and a vertical marker at each percentile whose label sits at its own height, so p95 and p99 never collide. The 1,800 request times are generated at module scope from a seeded sequence, so the bins, the percentiles, the marker places and the headline are all computed from them, never typed. A frame with + marks on its corners holds the chart, and the same bins are an unseen table for screen readers. On a phone the marker labels shorten to the percentile's name. For API and page-speed monitoring, SLO pages and anything where the tail matters more than the average.
FAQ
How do I use my own latencies?
Replace timesOf and TIMES at the top of the file with your own list of request times in milliseconds (a plain array of numbers works). The percentiles use the nearest-rank method on the sorted list, the bins count how many times fall in each 25 ms step, and AXIS and BIN set the range and the bin width. The scale's top is the tallest bin rounded up to a hundred, so nothing else needs editing. A time past the axis falls into the last bin.
How are the markers placed so labels don't overlap?
Each marker is a vertical line from its label to the foot of the bars, placed by its percentile as a share of the axis. The labels sit in a strip above the bars at two heights (row in MARKS), p95 lower than p50 and p99, and a label near the end of the axis flips to the line's start side so it stays inside the chart. The lines carry a halo of the page colour so they stay visible over the darker bars.
Why are the slowest bins darker?
Because the slowest 5% is the story. Bins from the one that holds the 95th percentile up use a darker tint of the text colour, the rest a light one. Both are solid mixes with the page colour, not transparency, so the gridlines never show through a bar, and the key under the chart says which is which. There are no red or green tones: the weight carries the meaning in every theme, light or dark.
Is the histogram accessible?
The drawing is hidden from assistive technology and the same numbers are text: the header list gives the three percentiles, the figure has a caption that states them, and an unseen table lists every bin with its range and request count. Values sit in bdi elements, and the chart box is forced left to right, so latency grows from the start of the axis in every language, including right-to-left pages.
What moves, and what happens on a phone?
The header and the figure fade up once on load, and the bars grow from the foot with a short stagger; with reduced motion all of it is off and the chart is simply there. On a phone the axis labels drop to every 100 ms, the marker labels show only the percentile's name (the value stays in the header list) and the chart is a little shorter. Nothing scrolls sideways at 320 pixels.
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
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
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
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
Line Chart With Threshold Stats
Area and lineA latency line against its 300 ms SLO for an API monitor: the stretches over the threshold are drawn thicker with ringed points, and a rail repeats the breaches, the time over and the worst reading in text.
- Pro
A table of services in a tinted frame with sortable column heads, 30-day uptime strips, response times and error rates, and a mark and a word on any service that is down.