Gauge Chart

Gauges and indicators for displaying single values with 8 distinct variants.

"use client"

import { GaugeChart } from "@/components/ui/charts"

export function GaugeChartDemo() {
  return (
    <GaugeChart
      value={72}
      min={0}
      max={100}
      label="Performance Score"
      color="#2563eb"
      thickness={0.12}
      animate
    />
  )
}

About

The Gauge Chart displays a single value within a defined range using animated arc indicators. It supports 8 different variants for various use cases from dashboards to speedometers.

Installation


pnpm dlx shadcn@latest add https://ui.simplifying.ai/r/gauge-chart.json

Usage

import { GaugeChart } from "@/components/ui/charts"
 
export function Example() {
  return (
    <GaugeChart
      value={75}
      min={0}
      max={100}
      label="Performance"
      variant="modern"
      color="#3b82f6"
      animate
    />
  )
}

Variants

Modern (Default)

Clean, minimal arc design with centered value display. Perfect for modern dashboards.

"use client"

import { GaugeChart } from "@/components/ui/charts"

export function GaugeChartDemo() {
  return (
    <GaugeChart
      value={72}
      min={0}
      max={100}
      label="Performance Score"
      color="#2563eb"
      thickness={0.12}
      animate
    />
  )
}

Speedometer

Classic speedometer style with needle indicator and tick marks. Great for showing speed or performance metrics.

"use client"

import { GaugeChart } from "@/components/ui/charts"

export function GaugeChartSpeedometerDemo() {
  return (
    <GaugeChart
      value={68}
      min={0}
      max={100}
      variant="speedometer"
      color="#3b82f6"
      thickness={0.18}
      showTicks
      tickCount={5}
      animate
    />
  )
}

Segmented

Color-coded segments that highlight different value ranges (good/warning/danger). Ideal for status indicators.

"use client"

import { GaugeChart } from "@/components/ui/charts"

export function GaugeChartSegmentedDemo() {
  return (
    <GaugeChart
      value={45}
      min={0}
      max={100}
      variant="segmented"
      label="Risk Level"
      thickness={0.15}
      segments={[
        { value: 0, color: "#bfdbfe", label: "Low" },
        { value: 33, color: "#60a5fa", label: "Medium" },
        { value: 66, color: "#1e40af", label: "High" },
      ]}
      animate
    />
  )
}

Radial

Full 360-degree circular gauge. Best for progress indicators and completion rates.

"use client"

import { GaugeChart } from "@/components/ui/charts"

export function GaugeChartRadialDemo() {
  return (
    <GaugeChart
      value={78}
      min={0}
      max={100}
      variant="radial"
      label="%"
      color="#2563eb"
      thickness={0.1}
      width={200}
      height={200}
      animate
    />
  )
}

Minimal

Ultra-clean design with thin arcs and min/max labels. Perfect for compact spaces.

"use client"

import { GaugeChart } from "@/components/ui/charts"

export function GaugeChartMinimalDemo() {
  return (
    <GaugeChart
      value={85}
      min={0}
      max={100}
      variant="minimal"
      label="Completion"
      color="#60a5fa"
      thickness={0.08}
      animate
    />
  )
}

Gradient

Beautiful gradient arc transitioning between two colors. Adds visual appeal to dashboards.

"use client"

import { GaugeChart } from "@/components/ui/charts"

export function GaugeChartGradientDemo() {
  return (
    <GaugeChart
      value={65}
      min={0}
      max={100}
      variant="gradient"
      label="Progress"
      color="#1e40af"
      colorSecondary="#93c5fd"
      thickness={0.12}
      animate
    />
  )
}

Meter

Technical meter style with external tick marks and labels. Suited for scientific/engineering displays.

"use client"

import { GaugeChart } from "@/components/ui/charts"

export function GaugeChartMeterDemo() {
  return (
    <GaugeChart
      value={58}
      min={0}
      max={100}
      variant="meter"
      label="Efficiency"
      color="#3b82f6"
      thickness={0.1}
      showTicks
      tickCount={5}
      animate
    />
  )
}

Dashboard

Bold percentage display optimized for KPI dashboards. Shows completion with large typography.

"use client"

import { GaugeChart } from "@/components/ui/charts"

export function GaugeChartDashboardDemo() {
  return (
    <GaugeChart
      value={82}
      min={0}
      max={100}
      variant="dashboard"
      label="Completion Rate"
      color="#2563eb"
      thickness={0.15}
      animate
    />
  )
}

API Reference

Prop	Type	Default	Description
value	`number`	required	Current value to display
min	`number`	`0`	Minimum value
max	`number`	`100`	Maximum value
variant	`"modern" \| "speedometer" \| "segmented" \| "radial" \| "minimal" \| "gradient" \| "meter" \| "dashboard"`	`"modern"`	Gauge style variant
label	`string`	-	Label text below value
units	`string`	-	Units suffix (e.g., "%", "mph")
showValue	`boolean`	`true`	Show the numeric value
thickness	`number`	`0.15`	Arc thickness (0-1, as percentage of radius)
color	`string`	`"#3b82f6"`	Primary arc color
colorSecondary	`string`	`"#8b5cf6"`	Secondary color (for gradient variant)
bgColor	`string`	`"#e5e7eb"`	Background arc color
segments	`Array<{ value: number; color: string; label?: string }>`	-	Custom segments for segmented variant
showTicks	`boolean`	`false`	Show tick marks
tickCount	`number`	`5`	Number of tick marks
animate	`boolean`	`true`	Animate on mount
animationDuration	`number`	`1000`	Animation duration in ms
valueFormatter	`(value: number) => string`	-	Custom value formatter
showPercentage	`boolean`	`false`	Show percentage instead of raw value

Examples

With Custom Segments

<GaugeChart
  value={72}
  variant="segmented"
  segments={[
    { value: 0, color: "#22c55e", label: "Good" },
    { value: 50, color: "#f59e0b", label: "Warning" },
    { value: 80, color: "#ef4444", label: "Critical" },
  ]}
  label="System Load"
/>

Gradient with Custom Colors

<GaugeChart
  value={65}
  variant="gradient"
  color="#3b82f6"
  colorSecondary="#ec4899"
  label="Progress"
  animate
/>

Speedometer with Ticks

<GaugeChart
  value={120}
  min={0}
  max={200}
  variant="speedometer"
  showTicks
  tickCount={5}
  units="mph"
  color="#ef4444"
/>

Notes

The gauge chart supports 8 distinct variants, each optimized for different use cases
All variants support smooth animations that can be customized or disabled
The modern variant is the default and works well for most dashboard scenarios
The segmented variant is ideal for status indicators with color-coded ranges
The speedometer variant includes a needle indicator and works well for real-time metrics
The radial variant displays a full 360-degree arc, perfect for completion rates
The gradient variant creates smooth color transitions between two colors
The meter variant includes external tick marks, suited for technical displays
The dashboard variant emphasizes percentage values with large typography
Custom value formatters allow for currency, percentages, or any custom display format
Tick marks can be enabled on compatible variants to show scale divisions

Sankey Chart Bullet Chart

On This Page

About Installation Usage Variants Modern (Default)Speedometer Segmented Radial Minimal Gradient Meter Dashboard API Reference Examples With Custom Segments Gradient with Custom Colors Speedometer with Ticks Notes

Deploy and Scale Agents with Simplifying AI

Simplifying AI delivers the infrastructure and developer experience you need to ship reliable audio & agent applications at scale.