MoonPhase

MoonPhase answers "how far through the cycle or period are we?" with a form almost everyone reads without a legend: the illuminated fraction of a disc. The lit area equals the value exactly — a closed-form terminator, not the phase-angle approximation that under-lights mid-cycle — so 50% genuinely lights half the disc. Progress mode fills monotonically; cycle mode maps the real lunar sequence.

Install

import { MoonPhase } from "@microcharts/react/moon-phase";<MoonPhase value={0.68} title="Sprint" />

Try it

When to use it

• Good for — sprint or quota progress in a sentence, a billing-period or release-cycle marker, or any 0–1 completion that reads at a glance.
• Avoid for — exact percentages (Progress), trends (Sparkline), or comparisons (MiniBar).

Sizing

Variants

Edge cases

Four homes

Why this default

Progress mode is the default because period-progress is the common need — a sprint or quota filling from new to full, monotonically. Pretending the real lunar cycle is monotonic would lie (it waxes then wanes), so mode="cycle" is a separate, explicit data-semantic switch, not a preset. The lit area is always exactly the value via the closed form — never the phase-angle shortcut. Area is a medium-precision channel, so steer exact reads to Progress; MoonPhase is for the glance.

Accessibility

The accessible name states the fraction — "0% of the cycle complete." in progress mode, or "0% through the cycle." in cycle mode. The interactive entry fades the lit region back in on change with a slight bloom (opacity plus a small scale, never a path interpolation, and skipped entirely under prefers-reduced-motion), reveals the exact percent on hover or focus, and announces changes through a polite live region throttled to at most once a second.

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

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.