SwiftUI how to prevent from multiple BarMarks collapsing into 1 BarMark - swiftui

Question

Here's what my code looks like, and it shows 5 BarMarks.
struct Record: Identifiable {
var id = UUID()
var altitude: Int
var speed: Double
var time: Int
}
struct TestView: View {
#State private var records:[Record] = [
Record(altitude: 15000, speed: 830, time: 1),
Record(altitude: 15000, speed: 830, time: 2),
Record(altitude: 15000, speed: 830, time: 3),
Record(altitude: 15000, speed: 830, time: 4),
Record(altitude: 15000, speed: 830, time: 5)
]
var body: some View {
VStack{
Chart(records) { record in
BarMark(x: .value("Date", String(record.time)), y: .value("Level", record.speed))
}.frame(height: 200)
}
}
}
But I want to show x-labels for only first one and last one.
So here is what I have tried. Provide empty X label strings when index is not first or last one using ternary operator.
Now it shows X-labels only for first and last one, but now all three middle BarMarks got collpased in one.
struct TestView: View {
#State private var records:[Record] = [
Record(altitude: 15000, speed: 830, time: 1),
Record(altitude: 15000, speed: 830, time: 2),
Record(altitude: 15000, speed: 830, time: 3),
Record(altitude: 15000, speed: 830, time: 4),
Record(altitude: 15000, speed: 830, time: 5)
]
var body: some View {
VStack{
Chart(0..<records.count, id: \.self) { index in
BarMark(x: .value("time", index == 0 || index == records.count-1 ? String(records[index].time) : ""), y: .value("speed", records[index].speed))
}.frame(height: 200)
}
}
}
Does anyone know why this behavior is happening and how I can prevent this from happening?

Answer 1

In your approach you are directly modifying the plot values. So Chart "sees" only 3 different x values: "1","","5" – and adds up all y values with the x value "".
To achieve what you want you can directly modify the xAxis appearance:
Add this modifier to your chart and leave the plot values as in your initial code.
.chartXAxis {
AxisMarks { value in
AxisGridLine()
AxisTick()
// only show first and last xAxis value label
if value.index == 0 || value.index == value.count-1 {
AxisValueLabel()
}
}
}