Arc Gauge

A filled arc gauge that sweeps from min to max. Uses a colored fill instead of a needle — the fill arc grows as the value increases.

Playground

info

onZoneChange callbacks work in your local project but not in this interactive playground due to how the editor re-renders components.

Props

Prop	Type	Default	Description
data	RelayDataPoint	—	Required. { value, timestamp, isLoading?, error? }
min	number	0	Minimum scale value
max	number	100	Maximum scale value
label	string	—	Label text centered inside the arc
unit	string	—	Unit suffix (e.g., "%")
formatValue	function	—	Custom value formatter: (value) => string
alertZones	AlertZone[]	—	Color zones rendered at 25% opacity on the arc
showZoneValues	boolean	false	Show boundary values on zone edges
styles	object	—	Custom styling — see Styles
showLastUpdated	boolean	false	Show the timestamp from data.timestamp
formatTimestamp	function	—	Custom timestamp formatter: (ts) => string
showLoading	boolean	true	Show skeleton shimmer while loading
onZoneChange	function	—	Called when value enters a new zone — see onZoneChange
onError	function	—	Called on invalid data — see onError

How It Differs from NeedleGauge

	NeedleGauge	ArcGauge
Visual	Rotating needle	Filled arc sweep
Default fill color	#374151 (grey)	#3b82f6 (blue)
Zone opacity	100%	25%
Arc thickness	14px	20px
Value position	Below the arc	Centered inside the arc
Default value font size	22px	26px

---

Styles

styles={{
  value: { fontSize: 26, fontWeight: 700, color: "#1e293b", fontFile: "/fonts/Custom.woff2" },
  label: { fontSize: 14, color: "#64748b" },
  unit: { fontSize: 12, color: "#94a3b8" },
  minMax: { fontSize: 10, color: "#94a3b8" },
  lastUpdated: { fontSize: 10, color: "#94a3b8" },
  background: { color: "#f8fafc" },
}}

Field	Applies to	Properties
value	The large number	fontFamily, fontSize, fontWeight, color, fontFile
label	The label text	fontFamily, fontSize, fontWeight, color, fontFile
unit	The unit suffix	fontFamily, fontSize, fontWeight, color, fontFile
minMax	Min/max labels	fontFamily, fontSize, fontWeight, color, fontFile
lastUpdated	Timestamp text	fontFamily, fontSize, fontWeight, color, fontFile
background	Component bg	color

Field	Type	Default	Description
arcThickness	number	20	Thickness of the gauge arc
arcAngle	number	180	Sweep angle in degrees (30–300)
width	number	—	Fixed width override
height	number	—	Fixed height override

---

With Hooks

import { useRelayLatest, ArcGauge } from "@relay-x/ui";

function HumidityGauge() {
  const latest = useRelayLatest({
    deviceIdent: "sensor_01",
    metric: "humidity",
    timeRange: { start: Date.now() - 86400000, end: Date.now() },
  });

  return <ArcGauge data={latest} min={0} max={100} label="Humidity" unit="%" />;
}