SwiftUI Bar Charts

by Annett Schwarze | 2025-05-30

SwiftUI Charts support creating bar charts. To create a bar chart, use a `Chart` view and place `BarMark`s inside.

Use `.foregroundStyle(by:)` to configure a stacking bar chart.

        

import SwiftUI
import Charts

struct SampleBarChartView: View {
    struct Record: Identifiable {
        static let df: NumberFormatter = {
            let formatter = NumberFormatter()
            formatter.numberStyle = .currency
            return formatter
        }()
        let id: UUID = UUID()
        var name: String
        var value: Double
        var type: String

        var label: String {
            "\(name)\n\(Self.df.string(from: NSNumber(value: value)) ?? "-")"
        }
    }

    @State private var data: [Record] = []
    private let demoData: [Record] = [
        Record(name: "Tax Return", value: 50, type: "Earnings"),
        Record(name: "Interest", value: 70, type: "Earnings"),
        Record(name: "Payment", value: 200, type: "Earnings"),
        Record(name: "Groceries", value: -80, type: "Expenses"),
        Record(name: "Insurance", value: -100, type: "Expenses"),
        Record(name: "Bicycle repair", value: -20, type: "Expenses")
    ]

    var body: some View {
        Text("SwiftUI Bar Chart")
            .font(.largeTitle)

        VStack {

            Chart(data) { item in
                BarMark(
                    x: .value("Type", item.type),
                    y: .value("Amount", abs(item.value)),
                    stacking: .standard
                )
                .foregroundStyle(by: .value("Category", item.name))
                .annotation(position: .overlay) {
                    Text(item.value, format: .currency(code: Locale.current.currency?.identifier ?? "$"))
                    .font(.caption.bold())

                }
            }
            .chartLegend(position: .bottom)
            .frame(height: 500)
            .padding()
            .padding(12)
            .background {
                Color.white
            }
            .clipShape(RoundedRectangle(cornerRadius: 16))

            Spacer()
        }
        .padding()
        .background {
            Color(white: 0.9)
        }
        .onTapGesture { // for testing
            loadData()
        }
        .onAppear {
            loadData()
        }
    }

    private func loadData() {
        data = []
        Task {
            for r in demoData {
                try? await Task.sleep(for: .milliseconds(400))
                withAnimation(.spring(duration: 0.8, bounce: 0.3)) {
                    data.append(r)
                }
            }
        }
    }
}

#Preview {
    SampleBarChartView()
}