Tips on how to create Stack bar chart in iOS 15 in SwiftUI with repair peak of bar chart


I’m new in SwiftUI and I discover resolution in iOS 16 and above however I would like to point out it in iOS 15

My code is like this

struct StackedBarChartView: View {
    let dataPoints: [String]
    let dataSets: [[Int]]
    let colours: [Color]
    let fixedWidth: CGFloat
    
    var physique: some View {
        VStack {
            HStack {
                ForEach(dataSets.indices) { index in
                    Spacer()
                    VStack(spacing: 10) {
                        ForEach(dataSets[index].indices) { innerIndex in
                            let worth = dataSets[index][innerIndex]
                            
                            RoundedRectangle(cornerRadius: 15)
                                .fill(colours[innerIndex % colors.count])
                                .body(width: fixedWidth, peak: 100)
                                .animation(.easeInOut)
                        }
                    }
                    Spacer()
                }
            }
            
            HStack {
                ForEach(dataPoints, id: .self) { dataPoint in
                    Textual content(dataPoint)
                        .font(.caption)
                        .body(maxWidth: .infinity)
                }
            }
            .padding(.prime)
        }
        .padding()
    }
}

struct AdminAttendanceDashboard: View {
let dataPoints = ["Present", "Absent", "Late"]
    let dataSets = [[20, 30, 10], [10, 5, 50], [5, 50, 0], [20, 1, 100]]
    let colours: [Color] = [Color(hex: 0xEDA02B), Color(hex: 0xEE2C3C), Color(hex: 0x009D6E)]
    var physique: some View {
        VStack{
            HStack{
                Textual content("Attendance Dashboard ")
                    .font(.customized(OpenSans_Bold, measurement: 20))
                    .foregroundColor(colorScheme == .mild ? Coloration(hex: 0x1A1A1A, alpha: 1.0) : Coloration(hex: 0xFFFFFF, alpha: 0.8))
                
                Spacer()
            }
            .padding(.prime)
            
            StackedBarChartView(dataPoints: dataPoints, dataSets: dataSets, colours: colours, fixedWidth: 10)
        }
        .padding(.horizontal)
    }
}

however it’s each bar peak as fastened as proven in Picture

enter image description here

however I need to present it like this

enter image description here

How can I present it like this
it’s taking the repair peak of bar worth. Is it’s doable?

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles