QueueDepth
QueueDepth plots backlog depth over time as a zero-anchored area against a capacity line, re-stroking every breach.
- encodes
- zero-anchored area (stock) + above-capacity spans re-stroked negative
- precision
- high for the depth; the trend glyph is a low-precision direction cue
- nodes
- ≤ 7
A support queue sits at 214 against a capacity of 100, and the question is whether it is draining or growing. QueueDepth 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 changes the shape of the edge as well as its color and survives greyscale. The endpoint carries the current value and a trend glyph (▴/▾) fit over the last quarter of the window: a low-precision direction cue, which is why the summary names that window in words rather than projecting a finish.
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
Use it for a support-queue backlog in a KPI card, a work-in-progress stock against its WIP limit, and a will-it-drain read in a tab header. For a rate rather than a stock use Sparkline; for a single count use Delta.
Sizing
Variants
With a locale, both the endpoint label and the accessible summary's numbers follow that locale's own grouping. In
German the summary reads "2.140 queued, 2,1× capacity, growing over the last quarter." rather than "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." The
capacity clause drops, because there is 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
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. The interactive entry steps the periods, announcing each depth and whether it is 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.