Visualizing Data with Swift Charts: Make Your App Sing

In this post, I want to talk about Swift Charts. Data is everywhere in our apps, but raw numbers can be hard to grasp. An important way for information and data to be presented more simply and effectively is by conveying them in a more visually understandable way. That’s where data visualization comes in! With clear and concise charts, you can transform complex information into easily digestible insights, taking your app’s user experience to a whole new level.

Here’s why Swift Charts is a game-changer for iOS developers:

• Simplicity at its finest: Swift Charts boasts a clean and intuitive API. Gone are the days of wrestling with complex third-party libraries. With Swift Charts, crafting clear and concise charts takes just a few lines of code.
• A chart for every story: Swift Charts offers a wide variety of chart types, from classic bar and line charts to area charts, scatter plots, and even histograms. Choose the perfect chart to best represent your data and tell your app’s story.
• SwiftUI magic: Swift Charts integrates seamlessly with SwiftUI, allowing you to leverage the power of SwiftUI’s declarative syntax. This means your charts will not only be functional but will also perfectly match the look and feel of your app.
• Customization galore: Don’t be fooled by Swift Chart’s simplicity. Under the hood lies a powerful customization engine. Tweak colors, fonts, labels, and animations to ensure your charts are not just informative but also visually appealing.
• Accessibility in mind: Swift Charts takes accessibility seriously. Charts are built with VoiceOver in mind, ensuring your data is accessible to everyone.

Intro

Let’s create some data for our chart to consume. First, make a new struct called PerformanceInfo, which simply defined a single point of data. In my case, I added two variables to visualize data.

struct PerformanceInfo: Identifiable {
    var id = UUID()
    var stores: Int
    var rating: Int
}

For my chart to iterate over my data, I also needed to make sure I conformed to Identifiable, requiring adding id as a variable.

Let’s make a collection of data points:

var storesPerfInfo: [PerformanceInfo] = [
    .init(stores: 0, rating: 3),
    .init(stores: 1, rating: 2),
    .init(stores: 2, rating: 4),
    .init(stores: 3, rating: 5),
    .init(stores: 4, rating: 1)
]

In body of View, set up VStack with Text inside:

var body: some View {
    VStack {
        Text("Stores performance")
    }
    .padding()
}

How to use Swift Charts?

Import charts and then below Text, let’s add Chart and provide the data we set up earlier. Then, BarMark can be added inside the Chart, as follows:

Chart(storesPerfInfo) { perfInfo in
    BarMark(
        x: .value("Stores ID", perfInfo.stores),
        y: .value("Rating", perfInfo.rating)
    )
}

I simply passed in my data (storesPerfInfo) as a parameter into a new Chart. Like ForEach, Chart will then provide each data point in the collection I pass in as perfInfo.

Anyone who’s worked with charts in code before has probably been taken aback that it takes just six lines of code to display data in a bar chart. What is even more amazing is that we can immediately see the results in Xcode Previews.

That’s it

This is all it takes to get started on building a comprehensive chart using Swift Charts. While this may seem basic, it doesn’t take much to customize and build on this chart to display even more data in an understandable and visually pleasing way. I will dive deeper into this in the next post.

To access the code discussed in this post, visit here.

Understanding Swift: Pass by Value and Copy-on-Write