Gauge Chart HTML CSS JS — Animated SVG Speedometer

The gauge chart — also called a speedometer chart, dial chart, or tachometer — is one of the most effective data visualizations for threshold-based metrics. Unlike a raw number or a progress bar, a gauge communicates context instantly: is this reading in the safe zone, the caution zone, or the danger zone? The semicircle arc, rotating needle, and color bands mimic real-world instruments that every user already understands from car dashboards, appliances, and wearable devices.

This snippet builds a three-gauge system monitor dashboard (CPU Usage, Memory Usage, Disk Usage) entirely in SVG, CSS, and vanilla JavaScript — no Chart.js, no D3.js, no Canvas, no external dependencies. Understanding how it works requires three distinct areas: SVG arc geometry, the stroke-dasharray fill technique, and CSS transform-based needle animation.

SVG Arc Geometry and the Path A Command

Every gauge is a semicircle rendered with an SVG <path> element using the arc command: M x1 y1 A rx ry x-rotation large-arc-flag sweep-flag x2 y2. The specific path d="M 20 100 A 80 80 0 0 1 180 100" breaks down as: start point (20, 100) — the left end of the semicircle, which is center-x (100) minus radius (80); end point (180, 100) — center-x plus radius; radii 80 80 for a circle; x-rotation 0; large-arc-flag 0 for the shorter arc; sweep-flag 1 for clockwise direction. Together this draws the upper semicircle from left to right across the viewBox.

The SVG viewBox is set to "0 0 200 120" — 200 units wide, 120 tall. Center is at (100, 100) with 20px padding on each side and 20px of space below center for the flat base. The gauge arc spans the full width from x=20 to x=180.

Color Zone Arcs

Rather than computing zone boundaries mathematically at render time, the snippet uses three pre-drawn arc path elements as a permanent background layer. .zone-low covers the left third (0–33%), .zone-mid the center third, and .zone-high the right third. Each is a separate <path> with a distinct stroke color (dark green, amber, dark red) and opacity 0.5, sitting behind the progress fill arc and providing a constant visual reference for threshold zones. Tick mark <line> elements at the two zone boundaries angle outward from the arc edge to give precise visual dividers.

The stroke-dasharray Fill Technique

The progress fill is the same full semicircle path, but uses stroke-dasharray to reveal only the filled portion. The total arc length of a semicircle with radius 80 is π × 80 ≈ 251.3 pixels — stored as ARC_CIRCUMFERENCE = Math.PI * R.

To show a gauge at 73%, the code sets: stroke-dasharray: "183.9 68.4" — a 183.9px dash (73% × 251.3) followed by a 68.4px gap. The CSS transition transition: stroke-dashoffset 0.85s cubic-bezier(0.4, 0, 0.2, 1) on .gauge-fill animates the fill change. The cubic-bezier produces a Material Design ease-out: fast initial movement, gentle deceleration. This is the same technique used by every SVG progress ring and circular chart on the web, generalized here to a semicircle.

The Needle: CSS Transform Rotation Without a JS Tween

The needle is an SVG <g> group element containing a <line> from center (100,100) to top (100,28) and a <circle> hub. The group has style="transform-origin:100px 100px" inline — pinning rotation to the SVG center point. The CSS class .needle-group declares the same transition as the fill arc. When JavaScript sets needleEl.style.transform = \rotate(${angle}deg)\``, the browser handles the smooth rotation entirely via CSS — no JavaScript animation loop for the needle movement itself.

needleAngle(pct) maps 0–100% to −90°–+90°: −90 + pct × 180. At 0% the needle points left (−90°). At 50% it points straight up (0°). At 100% it points right (+90°), covering the full 180° span of the semicircle.

The Double-rAF Initialization Pattern

On page load, gauges should appear at their starting values instantly — no animation from 0%. The initGauges() function uses a specific three-step pattern: (1) set fillEl.style.transition = 'none' and needleEl.style.transition = 'none' to disable transitions; (2) call updateGauge() to render the starting state; (3) restore transitions inside requestAnimationFrame(() => requestAnimationFrame(() => { fillEl.style.transition = ''; })).

A single requestAnimationFrame is insufficient — the browser may batch style computations and apply the transition before the initial paint completes. Two nested rAF calls guarantee the restore happens after at least one committed paint frame. This double-rAF pattern is the standard solution for "set initial value without triggering the enter animation" and appears in production component libraries including React Transition Group.

requestAnimationFrame Counter Animation

The center value <text> element shows the numeric percentage. When a gauge updates, animateCounter(el, from, to, duration) counts from the old value to the new value over 850ms using quadratic ease-in-out: t < 0.5 ? 2t² : −1 + (4−2t)t. This easing mirrors the needle and arc CSS transitions, making the number, arc, and needle feel synchronized.

Each call creates its own closure over from, to, and start (from performance.now()). Multiple counters can run simultaneously without conflict. The loop calls requestAnimationFrame(step) until t >= 1, then stops — no cleanup needed.

Multi-Gauge Composition and DOM Conventions

The three gauges follow a consistent id convention: fill-{id}, needle-{id}, and val-{id}. The updateGauge(id, value, animate) function locates elements via document.getElementById('fill-' + id). Adding a fourth gauge requires only: a new HTML gauge-card with matching ids, and a new entry in the GAUGES object. The grid uses CSS Grid repeat(3, 1fr) with a max-width: 600px responsive single-column fallback via a @media query.

Connecting to Live Data

Replace the preset buttons with: setInterval(async () => { const { cpu, memory, disk } = await fetch('/api/metrics').then(r => r.json()); updateGauge('cpu', cpu, true); updateGauge('memory', memory, true); updateGauge('disk', disk, true); }, 5000). For WebSocket push: ws.onmessage = e => { const d = JSON.parse(e.data); updateGauge(d.id, d.value, true); }. The animation system handles rapid updates — calling updateGauge mid-animation simply updates the target, restarting from the current visual position.