Radial Meter

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Activate your Pro license (once per machine)
npx koalaui-cli@latest login <key>

# Add this component (its dependencies come along)
npx koalaui-cli@latest add chart

Usage#

RadialMeter ships in the Chart folder. Pass a value and, when the limit is not 100, a max; the centre shows the share of the range as a percent unless you pass a valueFormatter. It is the radial counterpart of Meter: same meaning, same role="meter", a round shape for a KPI tile or a hero figure. Use it instead of a two-slice pie whenever the chart is a single percentage.

Radial Meter or Meter#

Both report how much of something there is against a known limit, and both announce as a meter. Meter is a bar, the better fit in a row, a table or a settings list, where several readings line up and compare by length. A radial meter carries one number in a compact square, the better fit for a dashboard tile or a single headline reading.

Gauge and thresholds#

variant="gauge" opens the ring into a 240° arc and crops the empty space below it. thresholds mark where a reading becomes a warning and a critical one (higher is worse, both inclusive): a notch breaks the track at each, and past one the fill takes the status hue and a labelled chip appears below, so the state never rides on colour alone. Shuffle to watch the fill ease between readings.

Concentric rings#

segments draws up to three rings, outermost first, with a gap that grows with the size (2px minimum), each measured against its own max: an activity goal, a budget per team. The centre still shows value, here the average of the three. Two or more series always want a legend, so pair the rings with one; the meter already gives assistive tech a list of every ring and its reading.

In a stat#

A small ring beside an absolute figure in a Stat: the ring says how full, the value says how much. A numeric size (56px here) with a thinner thickness fits a header row, and shared thresholds flag the resources running out.

Accessibility#

A single reading is a role="meter" with aria-valuenow, aria-valuemin and aria-valuemax, named by label (or your aria-label). Its aria-valuetext is the formatted value plus the status, so a screen reader hears “94%, critical”; pass your own to say more. With segments the meter becomes a labelled group described by a visually hidden list of every ring. The SVG is hidden from assistive tech. The fill draws in once on mount and eases between values, and lands at once under prefers-reduced-motion.

API reference#

FAQ#