Up to this point, we’ve been defining data marks directly within the chart view. However, in a real-world or production setting, data typically comes in a repeatable structure—like a collection. Fortunately, the Chart view can take a collection as input, automatically iterating over its elements and rendering a BarMark (or other marks) for each one.

Let’s create a simple data structure by defining a model to track total workout minutes by day.

struct Workout: Identifiable {
    var id = UUID()
    var day: String
    var minutes: Double
}

We’ll include some sample data within the extension for this workout struct.

extension Workout {
    static let workouts: [Workout] = [
        Workout(day: "Mon", minutes: 32),
        Workout(day: "Tue", minutes: 45),
        Workout(day: "Wed", minutes: 56),
        Workout(day: "Thu", minutes: 15),
        Workout(day: "Fri", minutes: 65),
        Workout(day: "Sat", minutes: 8),
        Workout(day: "Sun", minutes: 10),
    ]
}

Once we’ve completed our data structure, we can simply plug it into the chart view.

Chart(Workout.workouts) { workout in
        BarMark(
          ...
        )
      }

Complete example should look like this:

import Charts
import SwiftUI

struct Workout: Identifiable {
    var id = UUID()
    var day: String
    var minutes: Double
}

extension Workout {
    static let workouts: [Workout] = [
        Workout(day: "Mon", minutes: 32),
        Workout(day: "Tue", minutes: 45),
        Workout(day: "Wed", minutes: 56),
        Workout(day: "Thu", minutes: 15),
        Workout(day: "Fri", minutes: 65),
        Workout(day: "Sat", minutes: 8),
        Workout(day: "Sun", minutes: 10),
    ]
}

struct ChartsExampleView: View {
    var body: some View {
        VStack {
            Text("DevTechie.com")
                .font(.largeTitle)

            Chart(Workout.workouts) { workout in
                BarMark(
                    x: .value("Day", workout.day),
                    y: .value("Min", workout.minutes)
                )
            }
            .frame(height: 200)
        }
    }
}

#Preview {
    ChartsExampleView()
}

We can easily swap the x and y values to show a horizontal bar:

Chart(Workout.workouts) { workout in
                BarMark(
                    x: .value("Min", workout.minutes),
                    y: .value("Day", workout.day)
                )
            }
            .frame(height: 200)

Conclusion

By structuring our data into a model and leveraging Swift Charts’ ability to iterate over collections, we’ve created a clean, scalable way to visualize data using BarMark. This approach mirrors real-world use cases where data is often dynamic and structured. With just a few lines of code, we were able to build both vertical and horizontal bar charts, giving us flexibility in how we present our information. Swift Charts makes it easy to plug in structured data and focus on how best to communicate insights visually.