build69
Sign inGet API key
build69  /  Components  /  Charts  /  Gauge

Gauge

v1.0.4Updated 25 Jul 2026

Arc / speedometer gauge drawn with pure SVG. Shows a single value against a [min, max] range as a coloured arc with a centre readout. Supports arbitrary start / end angles, colour-band thresholds, tick segments, an optio

View source← Back to catalog

Preview

Live · 11 stories
DefaultOpen ↗
▸Why this is recommendedgaugemeterarcspeedometer+5

The default, out-of-the-box Gauge.

Recommended for+14
  • ✓KPI / score dials
  • ✓Speedometer-style indicators
  • ✓Utilisation / capacity gauges with colour zones
  • ✓Single-value goal meters
Tags+6
gaugemeterarcspeedometerdialkpidata-vizsvgdefault
Features+4
  • Pure SVG arc with rounded / butt caps
  • Arbitrary startAngle / endAngle (semicircle, full sweep, etc.)
  • Threshold colour bands (tones switch as the value crosses each band)
  • Tick segments around the arc
  • Optional needle pointer (speedometer style)
  • Background track toggle
  • Centre value readout with custom valueFormatter + label caption
  • Tones: primary / success / warning / danger / info / muted
  • Animated stroke-dasharray fill (respects prefers-reduced-motion)
Not recommended for−2
  • ✕Multi-metric comparison (use BarChart)
  • ✕Time-series (use LineChart)
  • ✕Concentric ring progress (use RadialChart)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Gauge" })

Usage

import { Gauge } from '@/components/data-viz/gauge';

<Gauge
  value={72}
  thresholds={[{ value: 50, tone: 'success' }, { value: 80, tone: 'warning' }, { value: 100, tone: 'danger' }]}
  label="Utilisation"
/>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
value

Current value

numberyes
min

Range floor (default 0)

number—
max

Range ceiling (default 100)

number—
startAngle

Arc start angle in deg (default 180)

number—
endAngle

Arc end angle in deg (default 0)

number—
thickness

Arc stroke width in px (default 14)

number—
size

Square size in px (default 200)

number—
tone

Base arc colour when no thresholds apply

GaugeTone—
thresholds

Colour bands (value upper-bound + tone)

GaugeThreshold[]—
segments

Number of tick marks around the arc

number—
showValue

Show centre numeric readout (default true)

boolean—
valueFormatter

Format the centre value label

(value: number) => string—
label

Small caption under the value

ReactNode—
needle

Draw a needle pointer (default false)

boolean—
track

Show the faint background arc (default true)

boolean—
rounded

Round the arc caps (default true)

boolean—
animate

Animate the fill (default true)

boolean—

Every tonal component shares the same tone × emphasis API, so the pair looks identical across Button, Badge, Alert and more.

Related

Platform docsAll componentsSource files