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

Question

I have created a chart view like below. I wanted to know how to change the bar mark when user tap on that 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 this barmark and apply color using gesture location by using Geometryreader.

Answer 1

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
}