How it works
AccessoryCircularCapacityGaugeStyle draws a gauge as a circular ring that fills in proportion to its value, presenting the level as a partially-completed loop rather than a sweeping needle. It's one of the compact "accessory" gauge styles designed for tight, glanceable contexts such as watchOS complications, widgets, and inline status indicators, where a small circle reads more clearly than a labeled arc. Reach for it when you want to show how full something is — a battery, a download, a quota — in a space where a full GaugeStyle would be too large.
Apply the style with .gaugeStyle(.accessoryCircularCapacity)
AccessoryCircularCapacityGaugeStyle conforms to GaugeStyle, so you attach it through the .gaugeStyle(_:) modifier rather than constructing it directly. The static accessor .accessoryCircularCapacity resolves to this style; here .gaugeStyle(.accessoryCircularCapacity) turns the surrounding Gauge into a capacity ring.
Drive the fill from the Gauge's value
The style renders the fraction of the ring that's complete from the gauge's value within its bounds, which default to 0...1. The Gauge(value: charge) call feeds charge, a Double of 0.65, so the ring fills roughly two-thirds of the way around.
Supply a center label with currentValueLabel
The capacity styles reserve the inside of the circle for a label, populated by the gauge's currentValueLabel closure. In this code the currentValueLabel block renders Text("\(Int(charge * 100))"), placing the numeric percentage at the heart of the ring; the leading label closure's Image(systemName: "battery.100") supplies the accompanying glyph.
Color the filled portion with .tint(_:)
The ring's completed arc adopts the view's tint, so you steer its color the same way you would any control. Applying .tint(.green) renders the filled segment of the AccessoryCircularCapacityGaugeStyle ring in green while the remaining track stays muted.
Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct AccessoryCircularCapacityGaugeStyleDemo: View {
@State private var charge = 0.65
var body: some View {
Gauge(value: charge) {
Image(systemName: "battery.100")
} currentValueLabel: {
Text("\(Int(charge * 100))")
}
.gaugeStyle(.accessoryCircularCapacity)
.tint(.green)
.padding()
}
}