QueueDepth
React queue depth chart — backlog depth over time against a capacity hairline. Tiny accessible SVG microchart; RSC-safe static or /interactive.
QueueDepth answers "is the backlog draining or growing?". It draws the queue depth as a zero-anchored area — a stock, not a rate — against a dashed capacity hairline. Wherever the depth runs above capacity, the top edge is re-stroked in the negative ink, so a breach is a change in shape as well as color. The endpoint carries the current value and a trend glyph (▴/▾) fit over the last quarter of the window.
Install
import { QueueDepth } from "@microcharts/react/queue-depth";<QueueDepth data={[42, 55, 70, 88, 96, 120, 150, 182, 214]} capacity={100} title="Support queue"/>Try it
When to use it
- Good for — a support-queue backlog in a KPI card, a work-in-progress stock against its WIP limit, will-it-drain in a tab header.
- Avoid for — a rate rather than a stock (Sparkline) or a single count (Delta).
Sizing
Variants
With a locale, both the endpoint label and the accessible summary's numbers follow that locale's own grouping — the
summary reads "2.140 queued, 2,1× capacity, growing over the last quarter." in German, not "2,140 queued, 2.1×
capacity".
Edge cases
With no capacity, the area still draws and the summary reads "214 queued, growing over the last quarter." — no
capacity clause, because there's nothing to compare against. A queue that stays under capacity reports "30 queued,
within capacity, draining over the last quarter." and never re-strokes the edge. Gaps (null/NaN/±Infinity) split
the area into separate runs rather than drawing a line across missing periods.
Four homes
Why this default
The capacity hairline plus the negative re-stroke, because "are we keeping up?" is a threshold question — a breach should read instantly and survive greyscale, so it changes the edge's shape, not only its color. The trend glyph is deliberately low-precision: it's fit over the last quarter of the window as a direction cue, and the summary states that window in words ("over the last quarter") rather than implying a forecast the data can't support.
Accessibility
The accessible name states the current depth, the capacity relationship, and the trend — "214 queued, 2.1× capacity,
growing over the last quarter.". When the depth stays under capacity the middle clause becomes "within capacity"; with
no capacity it drops entirely. The interactive entry steps the periods, announcing each depth and whether it's above
capacity ("t8: 214 queued, above capacity.").
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[] | Backlog depth per period (≥ 0). null / NaN / ±Infinity are gaps. |
| capacity | number | Steady-state capacity: a dashed hairline; spans above it re-stroke negative. |
| label | "last" | "none" | Endpoint value + trend glyph (▴/▾), default 'last', or nothing. |
| 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.