SwiftUI Chart Animation

ContentView.swift

//
//  ContentView.swift
//  ChartsAnimation
//
//  Created by Tariq Almazyad on 20/11/2025.
//

import SwiftUI
import Charts

struct Sales: Identifiable, Hashable, Equatable {
    let id = UUID()
    var day: String
    var count: Int
    var isAnimated: Bool = false
    
    static let mock: [Sales] = [
         Sales(day: "Sunday",    count: 12),
         Sales(day: "Monday",    count: 18),
         Sales(day: "Tuesday",   count: 37),
         Sales(day: "Wednesday", count: 15),
         Sales(day: "Thursday",  count: 27),
         Sales(day: "Friday",    count: 30),
     ]
}

struct ContentView: View {
    
    @State var values: [Sales] = []
    @State var isAnimated: Bool = false
    var body: some View {
        VStack {
            Chart {
                ForEach(values, id:\.id) { item in
                    BarMark(
                        x: .value("year", item.day),
                        y: .value("number", item.isAnimated ? item.count : 0)
                    ).foregroundStyle(by: .value("day", item.day))
                        .opacity(item.isAnimated ? 1 : 0)
                }
            }.frame(height: 300)
                .chartYScale(domain: 0...50)
                .onAppear {
                    animateChart()
                }
            Spacer()
        }
        .padding()
    }
    
    private func animateChart() {
        isAnimated.toggle()
        values = Sales.mock
        $values.enumerated().forEach { index, element in
            let delay = Double(index) * 0.2
            DispatchQueue.main.asyncAfter(deadline: .now() + delay) {
                withAnimation {
                    element.wrappedValue.isAnimated = true
                }
            }
        }
    }
}

#Preview {
    NavigationStack {
        ContentView()
            .preferredColorScheme(.dark)
            .navigationTitle("Chart Animation")
    }
}