Gauge Chart

Charts

Dashboard

Display KPIs and progress metrics with animated gauge visualizations.

Preview

Simple gauge with animated needle and value

Performance Score

Gauge Cards

Gauges in card containers with trend indicators and targets

Weekly Goal

Tasks completed this week

+5%

Target:90%

Team Satisfaction

Last survey score

+8%

Target:80%

Sprint Progress

Q4 2025 Sprint 3

+12%

0 tasks

Target:100 tasks

Live Data

Real-time gauge updates with color segments

CPU Usage

Real-time monitoring

Memory Usage

16 GB Total

Risk Score Gauge

Gradient arc gauge for risk and score visualization

Risk Score

Composite vulnerability index

62Risk Score

Risk Score

Low risk - all checks passed

18Risk Score

Icon Badges

Gradient background icon containers used alongside gauges in dashboards

Mini Gauges

Compact gauge indicators for dashboards

65%

Storage

42%

Bandwidth

88%

API Calls

99.9%

Uptime

2.3%

Errors

Props

Component API reference

GaugeChart

Prop	Type	Default	Description
`value*`	`number`	—	Current value to display
`min`	`number`	`0`	Minimum value
`max`	`number`	`100`	Maximum value
`unit`	`string`	—	Unit suffix (e.g., "%")
`label`	`string`	—	Label text below value
`color`	`string`	—	Single color for gauge arc
`segments`	`Segment[]`	—	Color segments with start, end, color
`animate`	`boolean`	`true`	Enable value animation

GaugeCard

Prop	Type	Default	Description
`title*`	`string`	—	Card title
`subtitle`	`string`	—	Card subtitle
`trend`	`'up' \| 'down' \| 'neutral'`	—	Trend direction
`trendValue`	`string`	—	Trend value text (e.g., "+5%")
`target`	`number`	—	Target value to display in footer
`formatValue`	`(v: number) => string`	—	Custom value formatter

Usage

Import and implementation examples

import { GaugeChart, GaugeCard, MiniGauge } from '@/blocks/charts/gauge-chart'

// Basic gauge
<GaugeChart
 value={75}
 min={0}
 max={100}
 unit="%"
 label="Performance"
/>

// Gauge card with trend
<GaugeCard
 title="CPU Usage"
 subtitle="Real-time"
 value={67}
 min={0}
 max={100}
 unit="%"
 trend="up"
 trendValue="+5%"
 target={90}
/>

// Custom color segments
<GaugeChart
 value={80}
 segments={[
 { start: 0, end: 0.6, color: 'var(--color-emerald-500)' },
 { start: 0.6, end: 0.8, color: 'var(--color-amber-500)' },
 { start: 0.8, end: 1, color: 'var(--color-rose-500)' },
 ]}
/>

// Mini gauge
<MiniGauge value={65} color="var(--color-indigo-500)" />

Features

Built-in functionality

Animated needle: Smooth needle and value transitions
Color segments: Custom color segments for thresholds
Trend indicators: Up, down, neutral trend with icons
Target display: Show target value in card footer
Mini variant: Compact gauge for dense dashboards
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

role="meter" on gauge elementaria-valuenow, aria-valuemin, aria-valuemaxaria-label describes the metric

Keyboard Navigation

Key	Action
`N/A`	Gauge chart is not interactive by default

Notes

Value displayed in text for screen readers
Animation respects prefers-reduced-motion
Trend direction announced with value

Related Components

Circle Progress Progress Statistic