Arc Gauge 360

Full-circle radial gauge. Ticks are distributed evenly around 360° (no overlap between first and last), and the value is rendered as an SVG <text> element anchored to the arc's geometric center (0, 0) — no matter the size.

Use this variant when you need a complete rotation; use arc-gauge for half-moon or partial sweeps where the value anchors to the arc's chord.

Installation

Usage

import { ArcGauge360 } from "@/components/arc-gauge-360";

export default function Page() {
  return <ArcGauge360 value={72} ticks={72} showValue />;
}

Formatted Value

<ArcGauge360
  value={0.86}
  max={1}
  ticks={60}
  showValue
  valueFormatter={(v) => `${Math.round(v * 100)}%`}
/>

Props

Features

• Full-circle distribution — Ticks divide 360 / ticks so the last tick never overlaps the first
• SVG-centered value — <text> at (0, 0) with textAnchor="middle" / dominantBaseline="central"
• Theme-driven — Tick colors come from var(--foreground) / var(--muted-foreground)
• Scalable value text — valueFontSize defaults to radius * 0.42, override as needed
• Accessible — role="meter" with aria-valuemin/max/now/text

Lineage