I need to create a component which enables the users to select a value in a specific date by horizontally scrolling the SwiftUI charts. The image of the component is below.
My code block is as below:
struct SampleModel: Identifiable {
var id = UUID()
var date: String
var value: Double
var animate: Bool = false
}
struct ContentView: View {
@State private var data = [
SampleModel(date: "26\nFr", value: 9.2),
SampleModel(date: "27\nSa", value: 12.5),
SampleModel(date: "28\nSu", value: 15.0),
SampleModel(date: "29\nMo", value: 20.0),
SampleModel(date: "30\nTu", value: 5.0),
SampleModel(date: "31\nWe", value: 7.0),
SampleModel(date: "01\nTh", value: 3.0),
SampleModel(date: "02\nFr", value: 20.0),
SampleModel(date: "03\nSa", value: 5.0),
SampleModel(date: "04\nSu", value: 7.0),
SampleModel(date: "05\nMo", value: 3.0),
SampleModel(date: "06\nTu", value: 10.0),
SampleModel(date: "07\nWe", value: 21.0),
SampleModel(date: "08\nTh", value: 14.0),
SampleModel(date: "09\nFr", value: 10.0),
SampleModel(date: "10\nSt", value: 7.0),
SampleModel(date: "11\nSu", value: 15.0),
SampleModel(date: "12\nMo", value: 17.0),
SampleModel(date: "13\nTu", value: 29.0)
]
@State private var scrollPosition: String = "26\nFr"
@State var priceText: String = ""
var body: some View {
GeometryReader { geometry in
VStack {
Text(priceText)
.padding()
Chart(data) { flight in
BarMark(x: .value("Date", flight.date),
y: .value("Price", flight.value),
width: 10.0)
.foregroundStyle(
Gradient(
colors: [
.blue,
.green
]
)
)
.clipShape(RoundedRectangle(cornerRadius: 16))
}
.frame(width: .infinity, height: 180)
.background(content: {
VStack {
Color.gray.frame(width: 1)
Color.clear.frame(height: 40)
}
})
.chartXAxis(content: {
AxisMarks(preset: .extended, position: .bottom) { value in
let label = value.as(String.self)!
AxisValueLabel(label)
.foregroundStyle(.gray)
}
})
.chartScrollableAxes(.horizontal)
.chartXVisibleDomain(length: 11)
.chartYAxis(.hidden)
.chartScrollTargetBehavior(
.valueAligned(unit: 1)
)
.chartOverlay { proxy in
}
}
.frame(width: .infinity)
}
}
}
I need to observe the content offset of the horizontally scrolling chart in order to retrieve the centre value based on the position by using proxy
of chartOverlay
. Is there a way to observe the content offset of the scrolling chart? Or is there another perspective to retrieve the centre value in the scrolling chart?