TapeGauge

TapeGauge answers "what is it now, is that OK, and where is it heading?" for a single live reading — airspeed, throughput, temperature, queue depth. The scale scrolls past a fixed center pointer, so the value stays parked where your eye already is; semantic zones mark the safe, caution, and danger bands; and a stack of chevrons encodes the rate of change as a channel entirely separate from the level. It is the aviation primary-flight-display tape, shrunk to a word.

Install

import { TapeGauge } from "@microcharts/react/tape-gauge";// zones — real values under “Sample data” below<TapeGauge value={142} rate={1} zones={zones} span={60} title="Airspeed" />

const zones = [  { from: 100, to: 130, tone: "pos" },  { from: 130, to: 150, tone: "warn" },  { from: 150, to: 200, tone: "neg" },];

Try it

When to use it

• Good for — a live changing reading with a safe/caution band; value plus trend at a glance.
• Avoid for — a history you want to scan (Sparkline) or a single static number (Delta).

Sizing

Variants

format also takes Intl.NumberFormatOptions — with a locale, both the in-gauge readout and the accessible summary follow that locale's own grouping ("14.200" in German, not "14,200").

Edge cases

Four homes

Why this default

The value is pinned at the pointer and the scale moves instead, because on a live instrument the one thing you never want to hunt for is the current reading. Rate lives on its own channel — chevrons, not position — so a fast climb and a high value are never confused for one another, the failure mode that sinks a naïve gauge. The visible span is fixed while the value updates, so a jump reads as motion of the scale rather than a silent rescale that hides how far it moved.

Accessibility

The accessible name states the level, the trend word, and the containing zone — "Now 142, rising; in the 130–150 zone." The interactive entry re-announces the reading through a polite live region, throttled so a rapidly changing value never floods a screen reader, and focus reads the full summary on demand.

This chart is a single unit, so there is nothing to rove between: a click, tap, Enter or Space selects it and fires onSelect, and no selection stays pinned. That is the scalar half of the shared interaction contract.

Props

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.