Autumn Sale50% offCOMPOT
Charts & GaugesFree ComponentiOS 16.0+Xcode 15+

Labeled Speed Gauge Circular

Speedometer-style dial gauge with unit labels and custom tint ranges.

SwiftUI Implementation

Pure Vanilla Swift • No Dependencies
labeledSpeedGaugeCircular.swift
import SwiftUI

struct LabeledSpeedGaugeCircular: View {
    var minSpeed: Float
    var maxSpeed: Float
    var currentSpeed: Float
    let gradient = Gradient(colors: [.green, .blue, .yellow, .orange, .red])
    var label: String
    
    var body: some View {
        Gauge(value: currentSpeed, in: minSpeed...maxSpeed) {
            Text(label)
                .font(.system(size: 10, weight: .light))
        } currentValueLabel: {
            Text("\\(Int(currentSpeed))")
        }
        .gaugeStyle(.accessoryCircular)
        .tint(gradient)
    }
}

struct UseLabeledSpeedGaugeCircular: View {
    var body: some View {
        VStack {
            LabeledSpeedGaugeCircular(minSpeed: 0.0, maxSpeed: 220.0, currentSpeed: 144.0, label: "MPH")
        }
        .padding()
    }
}

#Preview {
    UseLabeledSpeedGaugeCircular()
}

Ready to copy and paste directly into any Xcode project running iOS 16.0+.

Recommended Use Cases

  • Dashboard overviews, stats tracking, and metric highlights

Component Details

iOS Compatibility
iOS 16.0+
Xcode Version
Xcode 15+
Platform
iOS
License Tier
Free
Themes & Contexts
dashboard
Keywords
gaugespeedcircularlabel
C

Compot for iOS

Native SwiftUI playground app

Preview all 130+ components interactively on your device and copy code straight to Xcode with 1 tap.

Get Compot on the App Store