Gauge ChartPro
Pro
A radial chart displaying a value or progress as a portion of a circular range, often used for performance indicators.
Gauge Chart Playground
Gauge Chart Playground
Preview
Code
Controls
Size:
Default
Large
Rings:
2
3
Legend:
Label:
Installation
You can add the gauge chart component to your project manually:
1
Install the following dependencies:
npm
pnpm
yarn
bun
npm install class-variance-authority clsx tailwind-merge recharts2
Copy and paste the following code into your project.
Loading...
3
Update the import paths to match your project setup.
Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.
Basic Usage
A simple gauge chart with two rings:
import { VersaGaugeChart } from '@versaui/ui/components/Charts';
<VersaGaugeChart
rings={[
{ value: 72, label: 'CPU' },
{ value: 48, label: 'Memory' },
]}
/>Three Rings
Add a third ring for more metrics:
<VersaGaugeChart
rings={[
{ value: 375, max: 1000, label: 'Active users', color: 'primary' },
{ value: 750, max: 1000, label: 'Sessions', color: 'secondary' },
{ value: 875, max: 1000, label: 'Conversions', color: 'tertiary' },
]}
/>Sizes
Two size variants matching Figma:
{/* Default size */}
<VersaGaugeChart size="default" rings={rings} />
{/* Large size (default) */}
<VersaGaugeChart size="large" rings={rings} />Center Content
Override center label text or use a custom render prop:
{/* Override text */}
<VersaGaugeChart
rings={rings}
centerValue="1000"
centerSubtitle="Active users"
/>
{/* Custom content */}
<VersaGaugeChart
rings={rings}
centerContent={(rings) => (
<div className="text-center">
<div className="text-h5">{rings.length}</div>
<div className="text-b5">Metrics</div>
</div>
)}
/>
{/* Hide center label */}
<VersaGaugeChart rings={rings} showCenterLabel={false} />Legend
Show a card-style stacked legend below the chart:
<VersaGaugeChart rings={rings} legend />Custom Max Values
Each ring can have its own max value:
<VersaGaugeChart
rings={[
{ value: 72, max: 100, label: 'CPU %' },
{ value: 6.2, max: 8, label: 'RAM (GB)' },
{ value: 450, max: 1000, label: 'Requests' },
]}
/>Edge Cases
{/* 0% value — shows track only */}
<VersaGaugeChart rings={[{ value: 0, label: 'Empty' }]} />
{/* 100% value — full ring */}
<VersaGaugeChart rings={[{ value: 100, label: 'Full' }]} />
{/* Overflow clamped to max */}
<VersaGaugeChart rings={[{ value: 150, max: 100, label: 'Over' }]} />
{/* Empty state */}
<VersaGaugeChart rings={[]} />Loading State
<VersaGaugeChart rings={rings} loading />Accessibility
- Screen readers: Chart uses
role="img"with descriptivearia-label - Reduced motion: Animations disabled when
prefers-reduced-motion: reduceis set - Tooltips: Hoverable rings display value with
role="tooltip" - Theme adaptive: Automatically adapts colors across all Versa UI themes
VersaGaugeChart Props
| Prop | Type | Default | Description |
|---|---|---|---|
rings | GaugeRing[] | — | Required. Array of ring data objects (innermost first). |
size | 'default' | 'large' | 'large' | Chart size variant. |
legend | boolean | false | Show card-style legend below the chart. |
showCenterLabel | boolean | true | Show the default center value and subtitle. |
centerValue | string | number | auto | Override center value text. |
centerSubtitle | string | auto | Override center subtitle text. |
centerContent | (rings: GaugeRing[]) => ReactNode | — | Render prop for fully custom center content. |
roundedCaps | boolean | true | Use rounded stroke caps on ring arcs. |
loading | boolean | false | Show loading skeleton state. |
animated | boolean | true | Enable mount and value change animations. |
aria-label | string | auto | Accessible label for the chart. |
className | string | '' | Additional CSS classes. |
GaugeRing
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Required. Numeric value (0–max). Clamped automatically. |
max | number | 100 | Maximum value for this ring. |
label | string | — | Required. Human-readable ring label. |
color | 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'error' | 'warning' | auto | Color token. Auto-assigned from palette if omitted. |