Distribution plot — Björk UI

Components•Distribution plot

Distribution plot

A histogram with its density curve and percentile pins. Drag the threshold, or step it with the arrow keys, and the tail past it fills with the accent while the pill reads the exact share. Brackets change the bin count, and the bars morph between binnings instead of jumping.

Dependencies

Motion

Copy below cli

npx shadcn add @bjork-ui/distribution-plot

How to use

import { DistributionPlot } from "@/components/bjork-ui/charts/distribution-plot";<DistributionPlot  values={latencies}  defaultThreshold={250}  unit="ms"  markers={["p50", "p95", "p99"]}/>

API latency
Range (ms)	Count	Share
0 to 13	0	0.0%
13 to 25	0	0.0%
25 to 38	0	0.0%
38 to 50	0	0.0%
50 to 63	0	0.0%
63 to 75	0	0.0%
75 to 88	8	0.4%
88 to 100	32	1.6%
100 to 113	55	2.8%
113 to 125	124	6.2%
125 to 138	189	9.5%
138 to 150	231	11.6%
150 to 163	230	11.5%
163 to 175	220	11.0%
175 to 188	207	10.4%
188 to 200	168	8.4%
200 to 213	132	6.6%
213 to 225	104	5.2%
225 to 238	59	2.9%
238 to 250	55	2.8%
250 to 263	40	2.0%
263 to 275	33	1.7%
275 to 288	16	0.8%
288 to 300	19	1.0%
300 to 313	12	0.6%
313 to 325	5	0.3%
325 to 338	5	0.3%
338 to 350	7	0.4%
350 to 363	2	0.1%
363 to 375	7	0.4%
375 to 388	5	0.3%
388 to 400	5	0.3%
400 to 413	4	0.2%
413 to 425	6	0.3%
425 to 438	2	0.1%
438 to 450	6	0.3%
450 to 463	1	0.1%
463 to 475	3	0.2%
475 to 488	4	0.2%
488 to 500	0	0.0%
500 to 513	1	0.1%
513 to 525	0	0.0%
525 to 538	0	0.0%
538 to 550	0	0.0%
550 to 563	1	0.1%
563 to 575	1	0.1%
575 to 588	0	0.0%
588 to 600	1	0.1%

Options

Dataset

Bins

Density