StationGlyph

StationGlyph packs a full point 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. Five fields, one glyph, no legend — dense enough to tile a map, legible enough to read in a table cell.

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

• Good for — a dense weather station model, or any multi-field reading that must fit one cell.
• Avoid for — a single value (Delta) or a trend over time (Sparkline).

Sizing

Variants

Edge cases

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

Four homes

Why this default

Each field rides its own channel, so nothing is inferred from a shared one: sky cover is disc area, wind is the barb (direction as angle, speed quantized into barbs so the per-barb quantum is honest), and the numerals are placed where a forecaster expects them. Wind speed is quantized rather than drawn to scale for the same reason WindBarb quantizes it — a barb count reads exactly, a tiny length does not. Absent fields simply don't render — no barb, no numeral, and no stop for the keyboard. The one field with no "absent" state is the disc itself: omitting cloud looks and reads exactly like a clear sky.

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 — and 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.