Gauge Chart

A radial gauge for a single value with thresholds, plus text and stacked variants.

Usage in Gaia

Used to render single-value indicators — capacity, utilization, scores, percentages — in dashboards and AI-generated status responses where the value's position within a min/max range matters.

Features

Three Variants - gauge (default radial track), text (single big number), stacked (two-value comparison)
Threshold Colors - Auto-switches between green / amber / red based on warning/danger
Custom Range - Configurable min and max for non-percentage values
Optional Unit - Suffix the value with %, ms, etc.
Theme-Aware - Track and background adapt to muted/background tokens
Stacked Mode - Compare a primary value against a secondary segment

Installation

npx shadcn@latest add https://ui.heygaia.io/r/gauge-chart.json

Usage

import { GaugeChart } from "@/components/ui/gauge-chart";
 
export default function Example() {
  return (
    <GaugeChart
      value={68}
      title="Memory"
      unit="%"
      thresholds={{ warning: 60, danger: 80 }}
    />
  );
}

Props

GaugeChart

Prop	Type	Default	Description
value	number	-	Primary value to render
title	string	-	Label below the value
min	number	0	Lower bound of the range
max	number	100	Upper bound of the range
unit	string	-	Optional unit suffix (e.g. "%")
thresholds	`{ warning: number; danger: number }`	`{ warning: 60, danger: 80 }`	Percentage thresholds for color switching
variant	"gauge" \| "text" \| "stacked"	"gauge"	Visual style
secondValue	number	-	Secondary value (stacked variant only)
secondLabel	string	-	Secondary label (stacked variant only)

File Preview GitHub Stars Button

On This Page

Meet GAIA

Your open-source, proactive personal AI assistant with 200+ integrations. GAIA combines todos, goals, calendar, and email into one system, turns tasks into automated workflows, and completes work instead of just tracking it. Open-source and self-hostable with support for custom automations and multi-step workflows.