React components
Gauge chart
A circular gauge chart for visualizing a single metric against a range.
Overview
The GaugeChart component renders a semi-circular gauge. It supports coloring based on thresholds (Red/Orange/Green), smooth animations, and custom labels.
Usage
import { GaugeChart } from '@/components/core/gauge';
function ScoreCard() {
return (
<GaugeChart
value={75}
max={100}
size={200}
label={(v) => `${v}% Score`}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | Required | The current value to display. |
min? | number | 0 | The minimum value of the gauge. |
max? | number | 100 | The maximum value of the gauge. |
size? | number | 200 | The diameter of the gauge in pixels. |
strokeWidth? | number | 18 | Thickness of the gauge arc. |
animate? | boolean | true | Whether to animate the value change. |
duration? | number | 1200 | Animation duration in milliseconds. |
label? | (value: number) => React.ReactNode | - | Custom function to render the center label. |
customText? | (value: number) => React.ReactNode | - | Custom function to render additional text outside the SVG. |
className? | string | - | Optional CSS class names. |