TechnologiesSwiftUIControls and Style Configurations

GaugeStyleConfiguration struct

iOSmacOStvOSwatchOSvisionOS✓ renders

The properties of a gauge instance.

How it works

GaugeStyleConfiguration carries the resolved state of a gauge to a custom GaugeStyle, giving you everything you need to draw the control yourself. When you conform a type to GaugeStyle, the system hands your makeBody(configuration:) method a configuration value that exposes the gauge's normalized progress along with its prebuilt label views. Reach for it whenever the built-in gauge styles don't match your design and you want to render the track, fill, and readouts your own way while still letting SwiftUI own the underlying value and accessibility.

  1. Receive the configuration in makeBody(configuration:)

    A GaugeStyle's only requirement is makeBody(configuration:), and the configuration parameter is a GaugeStyleConfiguration. SwiftUI calls this method to produce the gauge's visual body, so the value you return is the entire rendered gauge. In RingGaugeStyle, makeBody returns a ZStack that composes a circular track from the configuration's data.

  2. Read the normalized progress from value

    The value property reports the gauge's current reading mapped into the unit interval from 0 through 1, regardless of the gauge's original range, so you can drive any geometry with it directly. The example feeds configuration.value into a Circle's trim(from: 0, to:), filling the ring in proportion to the reading.

  3. Drop in the gauge's labels

    GaugeStyleConfiguration vends ready-made views for the gauge's text, including currentValueLabel for the formatted reading and the related label, minimumValueLabel, and maximumValueLabel views. These come straight from the Gauge's closures, so you place them rather than recreate them. The ring style centers configuration.currentValueLabel inside the circle and styles it with font(.headline).

  4. Compose the pieces into a custom shape

    Because value and the label views are plain SwiftUI content, you arrange them with ordinary layout containers to build whatever form you want. Here a ZStack layers the trimmed, stroked Circle behind configuration.currentValueLabel, and a frame(width: 80, height: 80) gives the ring a fixed size.

  5. Activate the style with gaugeStyle(_:)

    Your conforming type only takes effect once you attach it with the gaugeStyle(_:) modifier on a Gauge, at which point SwiftUI builds the GaugeStyleConfiguration and invokes your makeBody. The example applies .gaugeStyle(RingGaugeStyle()) to a Gauge(value: 0.65), so the configuration's value arrives as 0.65 and its currentValueLabel as the Text("65%").

Try it — Change Gauge(value: 0.65) to Gauge(value: 0.25) and watch the ring's trim(from: 0, to: configuration.value) shrink to a quarter turn as the configuration's value updates.

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.

GaugeStyleConfiguration.swift
struct GaugeStyleConfigurationDemo: View {
    struct RingGaugeStyle: GaugeStyle {
        func makeBody(configuration: Configuration) -> some View {
            ZStack {
                Circle()
                    .trim(from: 0, to: configuration.value)
                    .stroke(.blue, lineWidth: 8)
                    .rotationEffect(.degrees(-90))
                configuration.currentValueLabel
                    .font(.headline)
            }
            .frame(width: 80, height: 80)
        }
    }

    var body: some View {
        Gauge(value: 0.65) {
            Text("CPU")
        } currentValueLabel: {
            Text("65%")
        }
        .gaugeStyle(RingGaugeStyle())
        .padding()
    }
}
Live preview
CPU
CPU
swift → lexer → parser → sema → uiir → canvas Open in Studio ↗
What's new in SwiftUI 27 →