CODEWITHSUNDEEP
swiftuiswiftui-charts
Leela
Leela

Reputation: 85

How to change the color of BarView in SwiftUI charts when we tap on it

I have created a chart view like below. I wanted to know how to change the bar mark when user tap on the bar.

Chart {
    ForEach(Data.lastOneHour, id: \.day) {
        BarMark(
            x: .value("Month", $0.day, unit: .hour),
            y: .value("Duration", $0.duration)
        )
    }
}

I see .onTap modifier is not available on BarMark and I don't see any way to access the bar mark and apply color using the gesture location by using a GeometryReader.

Upvotes: 6

Views: 1580

Answers (1)

workingdog support Ukraine
workingdog support Ukraine

Reputation: 36226

You could try this approach, using a chartOverlay and a select variable to change the bar color when the user tap on that bar.

struct ContentView: View {
    let measurement: [Measurement] = [
        Measurement(id: "1", val: 11.2),
        Measurement(id: "2", val: 22.2),
        Measurement(id: "3", val: 38.2)
    ]
    
    @State var select = "0"
    
    var body: some View {
        Chart(measurement) { data in
            BarMark(x: .value("Time", data.id), y: .value("val", data.val))
                .foregroundStyle(select == data.id ? .red : .blue)
        }
        .chartOverlay { proxy in
            GeometryReader { geometry in
                ZStack(alignment: .top) {
                    Rectangle().fill(.clear).contentShape(Rectangle())
                        .onTapGesture { location in
                            doSelection(at: location, proxy: proxy, geometry: geometry)
                        }
                }
            }
        }
    }
    
    func doSelection(at location: CGPoint, proxy: ChartProxy, geometry: GeometryProxy) {
        let xPos = location.x - geometry[proxy.plotAreaFrame].origin.x
        guard let xbar: String = proxy.value(atX: xPos) else { return }
        select = xbar
    }
    
}

struct Measurement: Identifiable {
    var id: String
    var val: Double
}

Upvotes: 6

Related Questions