StationGlyph

A weather table has one row per station and five fields to fit in each cell. StationGlyph packs the whole observation into one character, the way a meteorologist's station model does: the center disc fills with sky cover, a wind barb gives direction and quantized speed, and up to three corner numerals carry temperature, dew point, and pressure. Each field rides its own channel, so nothing has to be inferred from a shared one, and the numerals sit where a forecaster expects them.

Install

import { StationGlyph } from "@microcharts/react/station-glyph";<StationGlyph  station="KSFO"  cloud={0.75}  wind={{ direction: 225, magnitude: 15 }}  temp={16}  dewpoint={9}  pressure={1013}/>

Try it

When to use it

Use it for a dense weather station model, or any multi-field reading that has to fit one cell. A single value belongs in Delta and a trend over time in Sparkline.

Sizing

Variants

Edge cases

Sky cover is disc area and wind is the barb: direction as angle, speed quantized into barbs so the per-barb quantum holds. Wind speed is quantized rather than drawn to scale for the same reason WindBarb quantizes it, that a barb count reads exactly where a tiny length difference does not. Below the quarter-step threshold no barb is drawn at all. Absent fields don't render: no barb, no numeral, and no stop for the keyboard. The disc is the one field with no absent state, so omitting cloud looks and reads exactly like a clear sky.

format/locale flow through every corner numeral (temp, dew point, pressure) and through the wind speed and numerals named in the accessible summary: one formatter, one locale, no per-field overrides.

Four homes

Accessibility

The accessible name is the whole observation: "KJFK, wind northwest 45; sky overcast, 4° / 2°, 988." The interactive entry roves the present fields with ←/→, so a screen-reader user can step through station, wind, sky, temperature, dew point, and pressure one at a time; an omitted prop is not a stop. Escape clears the focus back to the whole-observation reading.

The interactive entry follows the shared interaction contract: arrow keys rove between units on both axes, Home and End jump to the ends, and a click, tap, Enter or Space selects a unit — pinning its readout so it survives blur, until you select it again or press Escape. On touch, a tap pins and a drag scrubs.

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.