SwiftUI Charts BarMark aligning annotation to top of chart - ios

Question

I'm trying out Swifts Charts. I am trying to align the annotation to the top of the chart, but I am not able to do it.
What I am trying to achieve is something like this:
But this is done with HStack on top of the chart, and it does not align 100%. So instead I am using the annotations modifier. The result is this:
But as you can see, the values are directly on top of the bar, which is not the result I am looking for.
The code used for the annotations is here:
.annotation {
Text("\(Int(item.price))")
.font(.system(size: 8))
.rotationEffect(.degrees(270))
.padding()
}
I have tried to add in a VStack, put in the Text and a Spacer underneath, but that did not help. I also tried with:
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
But that did not help either.
Hope you guys can help me you here :) Thanks in advance.

Answer 1

You can use .annotation(position: .overlay, alignment: .bottom) which gives you an annotation overlay over the mark that starts at the bottom of the mark.
Here is an example:
struct ContentView: View {
let data: [(Int, Int)] = {
(0...20).map { ($0, Int.random(in: 0...500)) }
}()
#State private var selectedX = 6
var body: some View {
VStack {
Chart {
ForEach(data.indices, id: \.self) { i in
let (x,y) = data[i]
BarMark(
x: .value("x", x),
y: .value("y", y)
)
.annotation(position: .overlay, alignment: .bottom, spacing: 0) {
Text("\(y)")
.font(.system(size: 8))
.frame(width: 570 , alignment: .trailing)
.rotationEffect(.degrees(-90))
}
}
}
.chartXScale(domain: 0...20)
.chartYScale(domain: 0...550)
.chartYAxis(.hidden)
.frame(height: 300)
}
.padding()
}
}