[SwiftUI] Does not work properly when added as a pie chart annotation

[diliproshitha]

When a Lottie animation is added as an annotation to pie chart, animation goes out of defined frame and does not play properly.

LottieAnimation.swift

import SwiftUI
import Lottie

struct LottieIconAnimation: View {
    
    @State var animationId: String
    @State var size: CGFloat = 100
    @State private var timer: Timer?
    
    var lottieAnimation: LottieAnimation? { LottieAnimation.named(animationId) }
    
    var body: some View {
        LottieView(animation: lottieAnimation)
            .playing()
            .scaledToFit()
            .frame(width: size, height: size)
    }
    
}

#Preview {
    LottieIconAnimation(animationId: "Lottie-Test")
}

Preview:

PieChart.swift:

import Charts
import SwiftUI

struct PieChart: View {
    
    @State var elements: [ChartElement]
    
    var body: some View {
        
        Chart(elements, id: \.id) { element in
            SectorMark(
                angle: .value("Sales", element.value)
            )
            .annotation(position: .overlay) {
                // This one does not work correctly
                LottieIconAnimation(animationId: "Lottie-Test", size: 50)
                    .frame(maxWidth: 50, maxHeight: 50)
                    .border(.black)
            }
            .cornerRadius(10)
            .foregroundStyle(element.color.gradient)
        }
    }
}

struct ChartElement {
    let id: UUID
    let label: String
    let color: Color
    let value: Int
}


extension PieChart {
    static let mockElements: [ChartElement] = [
        .init(id: UUID(), label: "Roll", color: Color(UIColor.red), value: 50),
        .init(id: UUID(), label: "Football", color: Color(UIColor.green), value: 20),
        .init(id: UUID(), label: "Walk", color: Color(UIColor.orange), value: 30),
        .init(id: UUID(), label: "Badminton", color: Color(UIColor.blue), value: 40),
        .init(id: UUID(), label: "Baseball", color: Color(UIColor.cyan), value: 10),
    ]
}


#Preview {
    
    PieChart(elements: PieChart.mockElements)
}

Preview:

Which Version of Lottie are you using?

Lottie 4.5.1

Expected Behavior

Animation should be playing properly when added as an annotation to a pie chart

Actual Behavior

Only a part of the animation is shown in given frame.

Animation JSON

Lottie-Test.json

Here is a test project for your reference:
LottieTestProject.zip

[calda]

I took a look. I see the LottieIconAnimation works correctly as a standalone view but not when inside the Chart view.

I believe this is an issue with the Swift Charts library annotation functionality and not specifically with Lottie.