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.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
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.