Gauge Progress Chart
A radial gauge showing a single SLA percentage with the value centred and the target threshold named in the footnote.
A radial gauge showing a single SLA percentage with the value centred and the target threshold named in the footnote.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Gauge Progress Chart shows Uptime SLA at 99.2% as a semicircular radial bar (startAngle 180, endAngle 0) with the value centred inside the arc in large text-foreground. The background track is hsl(var(--muted)) and the filled arc is var(--chart-1). The panel is titled Uptime SLA with the subtitle Rolling 30-day window. A footnote records: Target is 99.0%. Current period is above target by 0.2 points. Built on ui/chart with recharts RadialBarChart.
SLA_VALUE and SLA_TARGET are named constants at the top of the file so the threshold and the note stay in sync. The centred label is a position-absolute div overlaid on the chart container, pointer-events-none.
Reach for this block on an infrastructure or reliability dashboard to give a single percentage instant visual weight without cluttering a panel with a full chart. Wire SLA_VALUE to your uptime aggregation endpoint and SLA_TARGET to the contractual threshold.
A natural flow around it on an Application Pro page:
Before
After
One strong use is a rolling uptime SLA gauge. Other single-value gauges:
Tip: name the target threshold in the footnote, not just in the gauge; when the arc is near the edge it is hard to see whether you are above or below.