How can we create a custom Gauge Speedometer with vertical design just like volume stabilizer using SwiftUI?

Hello folks,
I am new to the SwiftUI, and i am trying to design a speedometer of a vehicle using SwiftUI, for that i have checked in various solutions, but all of them were of either circular or linear horizontal, but i need it fully customized.

Please find the attachment to clarify what thing i am going to create.

As shown in screenshot,
Initially it will be blank (all the bars), but when the motor vehicle speeds up it will raise with filled gradient, and if speed goes down it will be black vice versa

Basically i reviewed the gauge control, i achieve that by circular and horizontal progress bar style, but as per my requirement i need it in Vertical format just like shown in attachments.

For reference, kindly check this link:

Can anyone help me on this, any help would be appreciated.
Thanks in Advance.

Hello. SwiftUI questions is off-topic here as this forum is laser-focused on topics related to Swift programming language itself. Try asking on apple dev forums or stackoverflow.

1 Like

@tera I know that, but basically i need an idea if you could help in swift it would also be appreciated.

Perhaps something like this?

import SwiftUI

struct LineView: View {
    var width : CGFloat
    var color : Color
    var body: some View {
        RoundedRectangle(cornerRadius: 5.0)
            .frame(width: width, height: 10.0)
            .foregroundColor(color)
    }
}

struct ContentView: View {
    var wList : [CGFloat] {
        var tmp : [CGFloat] = []
        for i in stride(from: 100, to: 20, by: -5) {
            tmp.append(CGFloat(i))
        }
        return tmp
    }
    
    var body: some View {
        VStack(spacing: 2) {
            ForEach((wList), id: \.self) {w in
                HStack() {
                    Spacer()
                    LineView(width: w,
                             color: Color(red: CGFloat(w/100.0),
                                          green: 1.0 - CGFloat(w) / 100.0,
                                          blue: 0))
                        .frame(alignment: .trailing)
                }
                .frame(width: 100)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Bildschirmfoto 2023-06-08 um 15.18.11

Yes Exactly, @GreatOm , Thanks for the help