React Box Plot

Copy Page

Two tools with the same mean and very different spread look identical on a bar chart. Here they look obviously different — which is the entire reason to plot a distribution rather than its average.

Installation

Props

The exported computeBox(values) returns the full five-number summary plus iqr, outliers, and n, so you can reuse the statistics outside the chart.

Percentiles that match your other tools

Quartiles use linear interpolation — the "type 7" definition that NumPy and R use by default. That matters more than it sounds: there are at least nine published quartile definitions, and picking a different one gives you a box that disagrees with the analysis your process engineers ran in Python. Verified against the reference: [1..10] yields Q1 3.25, median 5.5, Q3 7.75, exactly as numpy.percentile(..., method="linear") does.

Whiskers are Tukey fences: they extend to the furthest actual sample still within 1.5×IQR of the box, not to a fixed percentile and not to the extremes. Anything beyond is drawn as a hollow outlier ring. That distinction is the point of the chart — a whisker that always reached the min and max would tell you nothing about whether a value is unusual.

Raw samples are jittered behind each box using a deterministic hash of the index, never Math.random(), so the cloud is identical between the server render and the browser.