SwiftUI Bar Charts
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() }
