Gauge Chart

Circular gauge and speedometer charts for KPIs, progress, and metric display. Each Gauge series renders as an independent arc.

Single KPI Gauge

Classic semi-circle gauge for a single metric.

Compare several metrics side-by-side in one chart.

Full-circle gauge styled as a clean progress ring.

Design

88%

Dev

61%

34%

GaugeChart and Gauge series parameters.

Prop	Type	Default	Description
DataKey	string	required	Property containing the gauge value.
Name	string?	null	Label shown in tooltip and legend.
Min	double	0	Minimum gauge value.
Max	double	100	Maximum gauge value.
StartAngle	int	225	Starting angle in degrees (clockwise from 3 o'clock).
EndAngle	int	-45	Ending angle in degrees.
Fill	string?	null	Arc fill color.
ShowPointer	bool	true	Show the needle/pointer.
ShowSplitLine	bool	true	Show major tick marks on the scale ring.
ShowAxisLabel	bool	true	Show numeric labels on the scale ring.
ShowTitle	bool	true	Show the series name label below the gauge.
ShowProgress	bool	true	Show the colored progress arc.
ProgressWidth	int	10	Thickness of the progress arc in pixels.
AxisLineWidth	int	10	Thickness of the background track ring in pixels.
DetailFontSize	int	24	Font size of the center value label.
DetailOffsetY	string	"70%"	Vertical offset of the center value label. Use "0%" for progress rings.
SplitNumber	int	10	Number of segments on the scale. Set to 0 for progress rings.