Gauge Chart

Charts

Circular gauge charts for KPIs and progress indicators with customizable thresholds, color zones, and smooth animations.

Installation

$npx linspo-ui add gauge-chart

Dependencies: lucide-react

Current reading

High

0100

Low

Medium

High

Prop	Type	Default	Description
`value`	`number`	`72`	Current value to display on the gauge.
`min`	`number`	`0`	Minimum value of the gauge range.
`max`	`number`	`100`	Maximum value of the gauge range.
`metric`	`string`	`"Performance Score"`	Label for the metric being displayed.
`unit`	`string`	`"%"`	Unit suffix to display after the value.
`thresholds`	`{ value: number; color: string; label: string }[]`	—	Array of threshold definitions for color zones.
`className`	`string`	—	Additional CSS classes to apply.