I've encountered an animation glitch affecting the text for AxisMarks
and AxisLabels
in the SwiftUI Chart framework. Below are the sample project code and animated gif for reference:
(I'm not being able to attach the gif for some reason. Here's my StackOverflow post with a the gift: https://stackoverflow.com/questions/77007744/swiftui-chart-text-animation-glitch-with-axismarks-and-axislabels)
struct ContentView: View {
@State var isDisplayingAge = true
var body: some View {
ChartView(data: ChartDataSample, isDisplayingAge: isDisplayingAge)
.onTapGesture {
withAnimation {
isDisplayingAge.toggle()
}
}
}
}
struct ChartData: Identifiable {
let age: Int
let presence: Int
let grade: Int
let id = UUID()
}
struct ChartView: View {
let data: [ChartData]
let isDisplayingAge: Bool
let xAxis = [0, 50, 100]
var body: some View {
VStack {
Chart {
ForEach(data) { chartData in
BarMark(x: .value("X Axis", isDisplayingAge ? chartData.age : chartData.presence),
y: .value("Y Axis", chartData.grade))
}
}
.chartXAxis(content: {
AxisMarks(position: .bottom, values: xAxis.map{$0}) { data in
AxisValueLabel(String(xAxis[data.index]) + (isDisplayingAge ? " years" : " days"))
}
})
.chartXAxisLabel(content: {
Text(isDisplayingAge ? "Data: age" : "Data: presence")
})
}
.padding(.horizontal, 13)
}
}
As you can observe, when I tap the chart to trigger a content change with animation, the text for AxisMarks
(e.g., x years / x days) and AxisLabels
(e.g., Data: age / Data: presence) animates unusually. A portion of the text is temporarily replaced by an ellipsis ("...") during the animation.
Interestingly, this issue occurs only in one direction of the animation. When transitioning from "year" to "day" or from "presence" to "age," the text simply gets replaced without any noticeable animation.
Can anyone explain what's happening here? Ideally, I'd like the texts to either fade into each other or be replaced without any animation.
Thank you.
My question was answered on StackOverflow: https://stackoverflow.com/questions/77007744/swiftui-chart-text-animation-glitch-with-axismarks-and-axislabels