Gauge

240° gauge for a single bounded KPI. role="meter" with min/max, a clamped now and the formatted value as valuetext.

Import

import { Gauge } from '@marbleui/ui'

Props

<Gauge>

Prop	Type	Default	Description
value *required	`number`	`—`
aria-label	`string`	`—`	Accessible name when `label` isn't a plain string (a node label names the meter through aria-labelledby otherwise).
className	`string`	`—`
format	`(v: number) => string`	`(v) => String(Math.round(v))`	Format for the center value.
label	`ReactNode`	`—`
lowIsBad	`boolean`	`—`	Invert: low is bad (e.g. a health score).
max	`number`	`100`
min	`number`	`0`
size	`number`	`180`
thresholds	`[number, number]`	`—`	Color bands as fractions of the range: [warningAt, dangerAt]. Omit for a single accent color.

Usage notes

A 240° dial for one bounded KPI, such as CPU load or a health score. For a compact bar use Meter; for several goals at once use RadialChart.

<Gauge value={78} label="Memory" format={(v) => `${Math.round(v)}%`} thresholds={[0.7, 0.9]} />
<Gauge value={42} label="Health score" thresholds={[0.6, 0.4]} lowIsBad />

thresholds are fractions of the min–max range, [warningAt, dangerAt], not percentages as in Meter. The arc turns warning, then danger, at or above each (at or below with lowIsBad). Without them it uses --chart-1.
It has role="meter" with min, max and current value. Screen readers get the raw value, not the formatted text, and the warning color isn’t announced.
A string label names the meter; a node label names it through aria-labelledby, and aria-label overrides both. With no label the name is “Gauge”.
aria-valuenow is clamped to min–max (like the arc), while aria-valuetext reads the formatted, unclamped value.
It isn’t wrapped in ChartContainer, so there is no summary or table. format also applies to the min and max labels; size defaults to 180.

Example source · show

import { Gauge } from './gauge'

export const styles = {
  Accent: () => <Gauge value={72} label="Uptime score" />,
  Thresholds: () => (
    <div className="flex gap-6">
      <Gauge value={38} label="CPU" format={(v) => `${Math.round(v)}%`} thresholds={[0.7, 0.9]} size={150} />
      <Gauge value={78} label="Memory" format={(v) => `${Math.round(v)}%`} thresholds={[0.7, 0.9]} size={150} />
      <Gauge value={96} label="Disk" format={(v) => `${Math.round(v)}%`} thresholds={[0.7, 0.9]} size={150} />
    </div>
  ),
  'Low is bad': () => <Gauge value={42} max={100} label="Health score" thresholds={[0.6, 0.4]} lowIsBad />,
}

Source: packages/ui/src/gauge/gauge.tsx

Catalog