Gauge Chart
Display a single metric as a dial or arc. Perfect for KPIs, progress indicators, and performance metrics.
Usage
import { GaugeChart } from "@chartts/react"
<GaugeChart
value={76}
max={100}
label="Performance"
ranges={[
{ min: 0, max: 50, color: "#ef4444" },
{ min: 50, max: 75, color: "#f59e0b" },
{ min: 75, max: 100, color: "#10b981" },
]}
/>Props
| Prop | Type | Description |
|---|---|---|
| value | number | Current value |
| min | number | Minimum value. Default: 0 |
| max | number | Maximum value. Default: 100 |
| label | string | Label text below the value |
| arc | number | Arc angle in degrees. Default: 240 |
| thickness | number | Track thickness in px. Default: 20 |
| ranges | { min: number; max: number; color: string }[] | Color ranges for the track |
Features
- Configurable arc angle
- Color ranges for thresholds
- Animated value changes
- Center label with value display
- Multiple gauge sizes
- Needle or arc fill modes
Other Charts
Line ChartBar ChartArea ChartPie / Donut ChartScatter ChartBubble ChartRadar ChartCandlestick ChartWaterfall ChartFunnel ChartSparklineStacked Bar ChartHorizontal Bar ChartDonut ChartHeatmapBox PlotHistogramTreemapPolar ChartRadial Bar ChartLollipop ChartBullet ChartDumbbell ChartCalendar ChartCombo ChartSankey Diagram