WindBarb
WindBarb encodes bearing as the shaft angle and magnitude as counted WMO barbs.
- encodes
- shaft angle + quantized barb count
- precision
- medium
- nodes
- ≤ 3
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
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.
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
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.
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). |
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.