React wind barb chart — shaft angle for bearing and quantized WMO barbs for strength. Tiny accessible SVG microchart; RSC-safe, static-only (no /interactive entry).

WindBarb answers "which way is it flowing and roughly how hard — in one character?". The shaft points along the bearing and the barbs count the magnitude: a half barb, a full barb, and a pennant are fixed quanta, so the glyph reads at a glance without a scale. Quantization is the honesty here, not a limitation — the per-barb quantum is stated next to every example.

WindBarb

static · 2.6 kB

Install

Import & usereact/wind-barb

import { WindBarb } from "@microcharts/react/wind-barb";<WindBarb direction={225} magnitude={32} step={10} title="Wind" />

Needs package + stylesheetSet up with AI

Try it

Reading the barb

WindBarb has no interactive mode — a single glyph carries the whole reading, so its accessible name is the full sentence. This gallery is the read-back key: each full barb is one step, a half barb is half a step, and a pennant is five.

compass — the same magnitude at eight bearings

magnitude ladder — count the barbs: a half barb is 5, a full barb 10, a pennant 50

When to use it

Good for — wind or current direction + strength, traffic flow, net migration, request routing.
Avoid for — exact magnitude (add label) or a time series (Sparkline).

Sizing

Variants

calm

arrow

label

Edge cases

calm — the open-circle glyph, not a zero-length shaft

negative magnitude flips the bearing 180° (dev warning, not an error)

a magnitude past what the shaft can hold saturates the drawn barbs; the summary keeps the true number

locale

format/locale reach the label="value" numeral and the accessible summary's magnitude together — the component builds one formatter and reuses it for both.

Four homes

Why this default

Quantized barbs read faster and more honestly than a scaled arrow whose length you'd have to measure against a legend — the glyph is calibrated to its step, so counting barbs gives the magnitude directly. A near-zero magnitude renders the conventional open circle for calm rather than a zero-length shaft, and a negative magnitude flips the bearing 180° with a dev warning.

Accessibility

The accessible name is the full reading — "Southwest (225°), magnitude 32." Calm renders as "Calm." Because the glyph is self-describing, rows of barbs get their interaction from the host table or list, not from the mark.

Props

Prop	Type	Notes
direction*	number	Degrees; 0 = up/north, clockwise.
magnitude*	number	Any unit; quantized into barbs.
step	number	Full-barb quantum (each barb = step).
label	"value" \| "none"	Numeric magnitude beside the glyph.
mode	"barb" \| "arrow"	"arrow" swaps quantized barbs for a plain direction arrow + label.

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.