Gauge

What this example shows

SvGauge - a production KPI dashboard: radial gauges with threshold bands and a live-updating value. Copy-paste ready.

Imports, features and API used

Imports: @svgrid/grid

Source code (319-gauge.svelte)

<script lang="ts">
  /**
   * SvGauge - a production KPI dashboard: radial gauges with threshold bands and
   * a live-updating value. Copy-paste ready.
   */
  import { SvGauge } from '@svgrid/grid'

  let cpu = $state(62)
  let sla = $state(99.2)
  const perfBands = [
    { from: 0, to: 60, color: '#22c55e' },
    { from: 60, to: 85, color: '#f59e0b' },
    { from: 85, to: 100, color: '#ef4444' },
  ]

  // A gentle live wobble so the needle animates (deterministic, no Math.random).
  let t = 0
  $effect(() => {
    const id = setInterval(() => { t += 1; cpu = Math.round(60 + Math.sin(t / 3) * 18) }, 900)
    return () => clearInterval(id)
  })
</script>

<div class="wrap">
  <header>
    <h2>Gauge</h2>
    <p>A radial arc gauge (role=meter) with colored threshold bands and a needle - dashboards, monitors, KPIs.</p>
  </header>

  <div class="tiles">
    <div class="tile">
      <SvGauge value={cpu} bands={perfBands} unit="%" size={150} />
      <span class="cap">CPU load</span>
    </div>
    <div class="tile">
      <SvGauge value={sla} min={95} max={100} unit="%" label={`${sla}%`} size={150} sweep={220} />
      <span class="cap">Uptime SLA</span>
    </div>
    <div class="tile">
      <SvGauge value={340} min={0} max={500} label="340" unit=" GB" size={150} needle={false} />
      <span class="cap">Storage used</span>
    </div>
  </div>
</div>

<style>
  .wrap { padding: 20px; max-width: 640px; display: flex; flex-direction: column; gap: 18px; }
  header h2 { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
  header p { margin: 0; color: var(--sg-muted, #64748b); font-size: 13.5px; line-height: 1.5; }
  .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
  .tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; border: 1px solid var(--sg-border, #e2e8f0); border-radius: 12px; }
  .cap { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--sg-muted, #64748b); }
</style>

View this example on GitHub

Related documentation

• SvGauge

Related articles

• Copy a Cell Range to the Clipboard in SvGrid - How SvGrid copies selected cell ranges as tab-separated values that paste cleanly into Excel and Google Sheets, plus headers, programmatic copy, and format control.
• Spreadsheet-Style Cell Range Selection in SvGrid - How to enable drag-to-select cell ranges, read live selection state, and build a status-bar footer that sums and averages the selected values.

More Range & Feedback examples

• Range & feedback - SvSlider (single or dual-thumb range, ticks, keyboard, vertical) and SvGauge (radial arc with threshold bands, needle, half sweep). Theme-driven value controls, standalone or in-grid.
• Slider - SvSlider: a filter block - a dual-thumb price range plus single sliders for rating and distance, with ticks and live formatted readouts.
• Progress (linear + circular) - SvProgress and SvCircularProgress: determinate + indeterminate progress with color intents, sizes, labels, striped fill, a buffered track, and a custom ring center. WAI-ARIA progressbar, reduced-motion aware.
• Feedback & display: badge, avatar, skeleton, card - SvBadge (status pills), SvAvatar (image + initials/colour-hash fallback + presence dot), SvSkeleton (shimmer loaders) and SvCard (surface) - the display layer for dashboards and detail panels. Toggle loading to swap content for skeletons.
• Status & display: alert, stat, timeline, chip, divider, empty - SvAlert (inline info/success/warning/danger messages with actions), SvStat (KPI cards with auto-coloured up/down deltas, invertible), SvTimeline (activity feed), SvChip (removable/clickable pills with avatars), SvDivider (labeled + vertical) and SvEmptyState. The status + display layer for dashboards and detail screens.