New in SwiftUI 4: Stacked Bar Chart

DevTechie Inc

Jun 24, 2022

Stacked Bar Charts are used when we want to show comparisons between categories. Typically, the bars are proportional to the values they represent and can be plotted either horizontally or vertically. One axis of the chart shows the specific categories being compared, and the other axis represents discrete values.

Today, we will build a stacked bar chart using Apple’s newly introduced Charts Framework in SwiftUI 4 with iOS 16. If you want to learn more about Charts, please checkout a detailed article here: https://medium.com/devtechie/new-in-swiftui-4-charts-bar-chart-f242698b04f4

We will start with a data structure for our example. In this example, we will plot DevTechie’s courses, platforms where courses are published and number of students in each platform.

Let’s start with an enum for course category and source:

enum DTCourseCategory: String {
    case uIKit = "UIKit"
    case swiftUI = "SwiftUI"
    case machineLearning = "Machine Learning"
}enum DTCourseSource: String {
    case youTube = "YouTube"
    case devTechie = "DevTechie.com"
    case udemy = "Udemy"
    case medium = "Medium"
}

Next, we will create DevTechieCourses struct and add some sample data:

struct DevTechieCourses: Identifiable {
    let id = UUID()
    let students: Double
    let category: DTCourseCategory
    let source: DTCourseSource
}extension DevTechieCourses {
    static let data: [DevTechieCourses] = [
        .init(students: 998, category: .swiftUI, source: .udemy),
        .init(students: 3432, category: .uIKit, source: .udemy),
        .init(students: 1324, category: .machineLearning, source: .udemy),
        .init(students: 1292, category: .swiftUI, source: .devTechie),
        .init(students: 1342, category: .uIKit, source: .devTechie),
        .init(students: 566, category: .machineLearning, source: .devTechie),
        .init(students: 1233, category: .swiftUI, source: .youTube),
        .init(students: 805, category: .uIKit, source: .youTube),
        .init(students: 543, category: .machineLearning, source: .youTube),
        .init(students: 900, category: .swiftUI, source: .medium),
        .init(students: 570, category: .uIKit, source: .medium),
        .init(students: 800, category: .machineLearning, source: .medium),
    ]
}

Once we have data ready, all we gotta do is put Chart view together and plot these values on to the chart. SwiftUI will take care of displaying it based upon the provided data.

We will use number of students as quantitative value and platform source as nominal value. We will also make sure that each stack in bar is styled using courses’ category, as shown below:

struct ContentView: View {
    
    var body: some View {
        VStack {
            Text("DevTechie.com")
                .font(.largeTitle)
                .foregroundColor(.primary)
            Text("Number of students by course category.")
                .font(.subheadline)
                .foregroundColor(.secondary)
            Chart(DevTechieCourses.data) { course in
                BarMark(
                    x: .value("Students", course.students),
                    y: .value("Source", course.source.rawValue)
                )
                .foregroundStyle(by: .value("Category", course.category.rawValue))
                .annotation(position: .overlay) {
                    Text(course.students.formatted())
                        .font(.caption.bold())
                }
            }
            .frame(height: 300)
        }
        .padding()
    }
}

With that we have reached the end of this article. Thank you once again for reading. Subscribe to our weekly newsletter at https://www.devtechie.com