Gauge Chart ^0.1.18

Radial progress / KPI indicator. Ideal for speedometers, system health, scores, and single-metric dashboards.

Basic

<VxGaugeChart :value="42" label="CPU usage" unit="%" />

With thresholds

Colors change automatically once the value passes each threshold.

<VxGaugeChart
  :value="78"
  :thresholds="[
    { value: 0,  color: '#22c55e' },
    { value: 60, color: '#f59e0b' },
    { value: 85, color: '#ef4444' },
  ]"
  label="Memory"
  unit="%"
/>

With needle (speedometer)

<VxGaugeChart :value="87" :max="100" showNeedle showTicks :tickCount="11" label="Score" />

Half-circle (semi-gauge)

<VxGaugeChart :value="23" :startAngle="-90" :endAngle="90" label="Disk" unit="%" />

Full circle

<VxGaugeChart :value="87" :startAngle="-90" :endAngle="270" :showMinMax="false" label="Progress" unit="%" />

Custom range

<VxGaugeChart :value="340" :min="0" :max="500" label="mph" color="#ef4444" />

Live updates

<VxGaugeChart :value="live" label="Live sensor" unit="%" :thresholds="[...]" />

Grid of gauges (system health)

Interactive

Props

Prop	Type	Default	Description
value	number	0	Current value
min	number	0	Minimum
max	number	100	Maximum
size	number	240	SVG diameter
thickness	number	18	Arc stroke width
startAngle	number	-135	Arc start in degrees
endAngle	number	135	Arc end in degrees
color	string	primary	Single color (no thresholds)
trackColor	string	var(--muted)	Background arc
thresholds	GaugeThreshold[]	[]	{ value, color } breakpoints
showValue	boolean	true	Show value text
showMinMax	boolean	true	Show min/max labels
showTicks	boolean	false	Show tick marks
tickCount	number	11	Tick count
showNeedle	boolean	false	Show center needle
label	string	''	Text under value
unit	string	''	Suffix after value
rounded	boolean	true	Rounded arc caps
animate	boolean	true	Animate to value