shadcn.io is an independent project built on shadcn/ui
Installation
Usage
import { ChartGaugeInteractive } from "@/components/charts/chart-gauge-interactive";<ChartGaugeInteractive />API Reference
Gauge
orientation?GaugeOrientation
"arc" draws the notches around an arc; "linear" lays them out along a horizontal track.
- Default
"arc"
valuenumber
Fill level from 0 to 100: the share of notches drawn in the active colour.
totalNotches?number
Number of notches.
- Default
40
spacing?number
Share of the track, in percent, reserved for the gaps between notches.
- Default
25
notchCornerRadius?number
Radius in pixels used to round the corners of each notch. 0 keeps them sharp; large values are limited by the notch size and approach a capsule shape.
- Default
0
uniformWidth?boolean
true draws notches with parallel sides; false tapers them toward the centre (arc) or midline (linear). Defaults to false for arc gauges and true for linear gauges.
startAngle?number
Angle where the arc starts, in degrees. Arc gauges only.
- Default
135
endAngle?number
Angle where the arc ends, in degrees. Arc gauges only.
- Default
405
useGradient?boolean
Colour the notches along a gradient instead of one solid colour.
- Default
false
activeGradient?readonly [string, string]
[from, to] colours for the active notches, interpolated along the notch index. Used when useGradient is on; defaults to --chart-1 to --chart-5.
inactiveGradient?readonly [string, string]
[from, to] colours for the inactive notches. Used when useGradient is on; defaults to activeGradient.
centerValue?number
Number shown in the label, which is drawn only when this is set. It is independent of value, so it can show a related figure such as revenue.
defaultLabel?string
Caption shown under (arc) or next to (linear) the centerValue.
- Default
"Total"
prefix?string
Text shown before the centerValue, for example "$".
suffix?string
Text shown after the centerValue, for example "%".
formatOptions?GaugeStatFormat
Number format for the centerValue, in Intl.NumberFormat terms (notation, currency, fraction digits and so on).
- Default
{ maximumFractionDigits: 0, notation: "standard" }
labelPlacement?GaugeLabelPlacement
Where the label sits relative to a linear track. Arc gauges always draw the label in the centre.
- Default
"top"
labelAlign?GaugeLabelAlign
Alignment of the label across the linear track: "start", "center" or "end".
- Default
"start"
inactiveFill?string
Colour of the inactive notches. Defaults to the --border colour.
activeFill?string
Colour of the active notches. Takes precedence over the gradient options. Defaults to --chart-1.
inactiveFillOpacity?number
Fill opacity of the inactive notches, from 0 to 1.
- Default
0.8
activeFillOpacity?number
Fill opacity of the active notches, from 0 to 1.
- Default
1
children?ReactNode
Accepted for bklit-ui compatibility; ignored. Custom SVG definitions such as patterns cannot be referenced by activeFill or inactiveFill.
className?string
Extra class name for the root element.
width?number
Fixed width in pixels. Omit to fill the parent. An arc gauge is fixed-size only when both width and height are set.
height?number
Fixed height in pixels. For a linear gauge this is the track thickness; when omitted the thickness is linearHeight.
minWidth?number
Minimum width in pixels when the gauge fills its parent.
- Default
300 for arc gauges, 200 for linear gauges
notchLengthPercent?number
Length of the notches as a percentage of their full length, clamped to 5 to 100.
- Default
100
notchWidthPercent?number
Width of each notch as a percentage of its slot, along the track. Linear gauges only.
- Default
80
linearHeight?number
Track thickness in pixels when height is not set. Linear gauges only.
- Default
24
enterTransition?GaugeEnterTransition
Transition for each notch's entrance, in the shape used by the motion library (type, duration in seconds, ease, and spring values).
enterStaggerScale?number
Multiplier for the delay between notch entrances (limited to 0.25 to 2.5).
- Default
1
geometryScrubbing?boolean
Accepted for bklit-ui compatibility; ignored.
ariaLabel?string
Accessible name of the gauge.
- Default
"Gauge: <value>%"
ariaDescription?string
Longer accessible description of the gauge, written as the svg's <desc>. Defaults to the reading ("72%") when ariaLabel is set, so a named gauge still announces its value.