GradedBand
GradedBand shows how sure one number is, as nested central intervals graded by opacity around a median tick.
- encodes
- nested interval extent, graded by opacity
- precision
- medium — interval read
- nodes
- ≤ 6
GradedBand prints one number's uncertainty as nested central intervals, graded by opacity, with a median tick. Opacity maps to probability level and nothing else. It is never a bar from zero: a bar with an error whisker induces edge-literalism bias, where the bar's end reads as the answer and the whisker as noise, and a graded band has no endpoint to over-read. Inner intervals are clipped inside their outer, so quantile rounding can never invert the nesting.
Install
import { GradedBand } from "@microcharts/react/graded-band";// posterior — real values under “Sample data” below<GradedBand data={posterior} label="median" title="Forecast estimate" />Sample data
// posterior draws for one estimate (deterministic pseudo-sample)const posterior = Array.from( { length: 160 }, (_, i) => 21 + Math.round(9 * Math.sin(i) + 6 * Math.sin(i * 2.3)),);Try it
When to use it
Use it for a forecast with its uncertainty, estimate-vs-actual in a KPI card, and posterior summaries. For countable odds use QuantileDots; for a forecast over time, ForecastCone.
Sizing
Variants
With a locale, the median label and the accessible summary follow that locale's decimal mark — the label above renders
"2,2", not "2.2".
Edge cases
The accessible name for that strip is "Point value 42, no interval." A degenerate sample is announced as a point estimate rather than as certainty about a range.
Four homes
Accessibility
The accessible name states the median with the innermost and outermost intervals. For the forecast above that is "Median 22; 50% within 15–27, 95% within 8–36." The interactive entry roves the band edges, announcing each interval's coverage and bounds.
The interactive entry follows the shared interaction contract:
arrow keys rove between units on both axes, Home and End jump to the ends, and a click, tap, Enter or
Space selects a unit — pinning its readout so it survives blur, until you select it again or press Escape.
On touch, a tap pins and a drag scrubs.
Props
| Prop | Type | Notes |
|---|---|---|
| data* | number[] | Sample / posterior draws; the component derives the intervals. |
| levels | number[] | 1–3 nested central intervals (default [50, 80, 95]). |
| value | number | Observed value overlaid as a dot. |
| softEdge | boolean | Fade past the outer band — 'this is approximate'. |
| label | "median" | "none" | States the median in a right gutter (default none). |
| animate | boolean | interactiveOpt-in entrance motion when the chart mounts client-side — add import "@microcharts/react/motion" once. Inert on the server, on hydrated server HTML, and under prefers-reduced-motion. |
Plus the shared grammar — data, domain, color, title, summary, format — and the layout props (width, height, className, style) that every chart accepts. Interactive entries also share animate and live, and — wherever a chart has more than one navigable unit — onActive, onSelect, selectedIndex and defaultSelectedIndex; and — wherever the chart shows a hover value — readout. See the shared grammar.