SwiftUI Chart Text Animation Glitch with AxisMarks and AxisLabels

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.

Accepted Reply

My question was answered on StackOverflow: https://stackoverflow.com/questions/77007744/swiftui-chart-text-animation-glitch-with-axismarks-and-axislabels

Replies

My question was answered on StackOverflow: https://stackoverflow.com/questions/77007744/swiftui-chart-text-animation-glitch-with-axismarks-and-axislabels