# WindBarb (/docs/charts/wind-barb)

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.

```tsx
<WindBarb direction={225} magnitude={32} step={10} label="value" title="Wind" size={64} />
```

## Install

```tsx
import { WindBarb } from "@microcharts/react/wind-barb";

<WindBarb direction={225} magnitude={32} step={10} title="Wind" />
```

Setup (package + stylesheet): [Quickstart](/docs/quickstart#set-up-with-an-ai-agent) or paste [`/agent-setup.md`](/agent-setup.md) into your agent.

## Try it

```tsx
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.

```tsx
<WindBarb direction={45} magnitude={35} />
```

```tsx
<WindBarb direction={90} magnitude={55} label="value" />
```

## 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

**table cell**

```tsx
<WindBarb direction={row.dir} magnitude={row.speed} size={18} />
```

**with label**

```tsx
<WindBarb direction={45} magnitude={25} label="value" />
```

## Variants

```tsx
<WindBarb direction={0} magnitude={1} />
```

```tsx
<WindBarb direction={45} magnitude={25} mode="arrow" />
```

```tsx
<WindBarb direction={225} magnitude={32} step={10} label="value" />
```

## Edge cases

```tsx
<WindBarb direction={0} magnitude={0} />
```

```tsx
<WindBarb direction={90} magnitude={-25} />
```

```tsx
<WindBarb direction={225} magnitude={5000} step={10} label="value" />
```

```tsx
<WindBarb direction={225} magnitude={32} step={10} label="value" format={{ maximumFractionDigits: 0 }} locale="de-DE" />
```

`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

**In a sentence**

```tsx
<p>
  Wind at KSFO{" "}
  <span className="mc-inline">
    <WindBarb direction={225} magnitude={32} summary={false} />
  </span>{" "}
  — SW 32 kt, three full barbs.
</p>
```

**In a table cell**

```tsx
<td>
  <WindBarb direction={225} magnitude={32} />
</td>
```

**In a KPI card**

```tsx
<div className="kpi">
  <span className="figure">225°</span>
  <span className="unit">· 32 kt</span>
  <WindBarb direction={225} magnitude={32} />
</div>
```

**In a tab header**

```tsx
<button className="tab">
  Coastal <WindBarb direction={225} magnitude={32} />
</button>
```

## 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](/docs/accessibility#one-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 | Description |
| --- | --- | --- |
| `direction` (required) | `number` | Degrees; 0 = up/north, clockwise. |
| `magnitude` (required) | `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` | (interactive) Opt-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](/docs/quickstart#the-shared-grammar).