WindBarb
WindBarb encodes bearing as the shaft angle and magnitude as counted WMO barbs.
- encodes
- shaft angle + quantized barb count
- precision
- medium
- nodes
- ≤ 3
- collection
- Frontier
Southwest at 32, in one character. WindBarb points the shaft along the bearing and counts the magnitude in barbs: a half
barb, a full barb, and a pennant are fixed quanta, calibrated to the chart's step, so counting them gives the
magnitude without a scale to measure against. The per-barb quantum is stated next to every example below.
Install
import { WindBarb } from "@microcharts/react/wind-barb";<WindBarb direction={225} magnitude={32} step={10} title="Wind" />Try it
- hover · click · Enter…
Hover or focus the chart — values are read out as you move.
import { WindBarb } from "@microcharts/react/wind-barb/interactive";<WindBarb direction={225} magnitude={32}/>Reading the barb
A single glyph carries the whole reading, so its accessible name is the full sentence and the interactive entry has
nothing to pick between — hover or focus reports the one reading through onActive / onSelect, with no index props.
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.
When to use it
Use it for wind or current direction plus strength, traffic flow, net migration, and request routing. For an exact
magnitude add label; for a time series use Sparkline.
Sizing
Variants
Edge cases
format/locale reach the label="value" numeral and the accessible summary's magnitude together: the component
builds one formatter and reuses it for both. 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.
Four homes
Wind at KSFO — SW 32 kt, three full barbs.
| KSFO | 225° 32 | |
| KJFK | 180° 18 | |
| KORD | 270° 24 |
Preview uses the public chart API only. When an interactive twin exists, it swaps in with the same props and no entrance motion - code samples stay on the static import. Placement recipes: Composition, Sizing.
Accessibility
The accessible name is the full reading: "Southwest (225°), magnitude 32." Calm renders as "Calm." The glyph is self-describing, so rows of barbs get their interaction from the host table or list rather than from the mark.
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.
Hover or focus also reveals the reading itself in a floating chip, for the sizes and label modes where the mark
does not print it; readout={false} drops the chip and keeps everything else.
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. |
| size | number | Barb box edge in viewBox units (default 32). |
| 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.