Gauge Chart
A production-ready gauge chart with configurable color zones on a 3/4 arc. Perfect for dashboards displaying CPU, memory, scores, and any bounded metric. Full TypeScript support and one-command installation.
CLI Installation
Configurable Zones
3/4 Arc Design
Glow Effect
Responsive
TypeScript
Loading & Error States
Reduced Motion
Interactive Example
Drag the slider to update the gauge value in real time
Loading...
Value72%
0100
Preset:
Installation
Get started with the GaugeChart component in just a few steps.
Quick Install
bash
npx mario-charts@latest add gauge-chartZero Lock-in Philosophy
The component is fully yours to own, modify, and customize.
Examples
Explore different configurations and use cases for the GaugeChart component.
Memory Usage — GB Range
Gauge with a non-percentage range (0–32 GB) and zone labels
Loading...
Performance Score — Reversed Zones
Zones ordered from worst to best — red at the low end, green at the high end
Loading...
Loading State
Error State
Chart Error
Failed to fetch metric data
Empty State
No Data
Configure zones to display the gauge
API Reference
Complete TypeScript interface with all available props and configurations.
| Prop | Type | Default | Description |
|---|---|---|---|
valuerequired | number | — | The current value to display on the gauge |
zonesrequired | readonly GaugeZone[] | — | Array of zone objects defining color regions: { from, to, color, label? } |
min | number | 0 | Minimum value of the gauge range |
max | number | 100 | Maximum value of the gauge range |
unit | string | — | Unit label displayed next to the center value (e.g. '%', 'GB') |
label | string | — | Descriptive label displayed below the center value |
strokeWidth | number | 20 | Thickness of the gauge arc stroke in pixels |
height | number | 300 | Height of the chart container in pixels |
loading | boolean | false | Show loading skeleton state |
error | string | null | null | Error message to display in place of the chart |
animation | boolean | true | Enable entrance animation for the progress arc |
className | string | — | Additional CSS classes to apply to the container |