I must create a element which permits the customers to pick a price in a particular date by horizontally scrolling the SwiftUI charts. The picture of the element is beneath.
My code block is as beneath:
struct SampleModel: Identifiable {
var id = UUID()
var date: String
var worth: Double
var animate: Bool = false
}
struct ContentView: View {
@State non-public var knowledge = [
SampleModel(date: "26nFr", value: 9.2),
SampleModel(date: "27nSa", value: 12.5),
SampleModel(date: "28nSu", value: 15.0),
SampleModel(date: "29nMo", value: 20.0),
SampleModel(date: "30nTu", value: 5.0),
SampleModel(date: "31nWe", value: 7.0),
SampleModel(date: "01nTh", value: 3.0),
SampleModel(date: "02nFr", value: 20.0),
SampleModel(date: "03nSa", value: 5.0),
SampleModel(date: "04nSu", value: 7.0),
SampleModel(date: "05nMo", value: 3.0),
SampleModel(date: "06nTu", value: 10.0),
SampleModel(date: "07nWe", value: 21.0),
SampleModel(date: "08nTh", value: 14.0),
SampleModel(date: "09nFr", value: 10.0),
SampleModel(date: "10nSt", value: 7.0),
SampleModel(date: "11nSu", value: 15.0),
SampleModel(date: "12nMo", value: 17.0),
SampleModel(date: "13nTu", value: 29.0)
]
@State non-public var scrollPosition: String = "26nFr"
@State var priceText: String = ""
var physique: some View {
GeometryReader { geometry in
VStack {
Textual content(priceText)
.padding()
Chart(knowledge) { flight in
BarMark(x: .worth("Date", flight.date),
y: .worth("Value", flight.worth),
width: 10.0)
.foregroundStyle(
Gradient(
colours: [
.blue,
.green
]
)
)
.clipShape(RoundedRectangle(cornerRadius: 16))
}
.body(width: .infinity, top: 180)
.background(content material: {
VStack {
Coloration.grey.body(width: 1)
Coloration.clear.body(top: 40)
}
})
.chartXAxis(content material: {
AxisMarks(preset: .prolonged, place: .backside) { worth in
let label = worth.as(String.self)!
AxisValueLabel(label)
.foregroundStyle(.grey)
}
})
.chartScrollableAxes(.horizontal)
.chartXVisibleDomain(size: 11)
.chartYAxis(.hidden)
.chartScrollTargetBehavior(
.valueAligned(unit: 1)
)
.chartOverlay { proxy in
}
}
.body(width: .infinity)
}
}
}
I would like to watch the content material offset of the horizontally scrolling chart with a purpose to retrieve the centre worth based mostly on the place by utilizing proxy of chartOverlay. Is there a strategy to observe the content material offset of the scrolling chart? Or is there one other perspective to retrieve the centre worth within the scrolling chart?
