Back in 2022, Apple introduced Swift Charts at the yearly Worldwide Developers Conference. Swift Charts is a powerful framework that allows you create interactive data visualizations. In this tutorial, we’re going to build a simple bar chart to display the number and genres of books you’ve read per year.
Data
We can get started by creating a new SwiftUI project on XCode. Next, we'll add a struct that will represent a single bar, we'll call it BookStat.
Now we can create another struct that we will use as our data provider. You can create a new file or just add it in ContentView.swift for now, but the struct will look like so:
Note that in addition to the bookData list, we also created a simple Date extension to create a Date object from a given year.
Bar Chart
Now that our sample data is ready, we will display the bookData list using a bar chart. Note that the order of the data doesn't matter, Swift Charts will automatically handle ordering the dates from earliest to latest.
To be able to use Swift Charts, we need to import the library, so make sure to add import Charts in ContentView.swift. Each bar in the bar chart will be created using BarMark, which requires an x and y value. In our chart, the x-axis will be used for the year, and the y-axis will be used for the book count.
To create the chart, we will use a Chart initializer and give it the bookData, then for each book stat in the list we will create a single BarMark. In the end, our ContentView should look something like this:
Now if you run your app or look at the app preview, you'll see your chart with a bar for each year in the data.
Stacked Bar Chart
Suppose you wanted to split each bar by book genre, Swift Charts lets you do that! Let's first update our data model to support splitting our book counts by genre. We will create a Genre enum and update the BookStat struct to hold a dictionary of book counts instead of a single Int:
Next, we can update our data provider with the counts split by genre, like so:
Finally, we will update our Chart. We will create a BarMark for each genre in each year, and we will use the foregroundStyle modifier to color each bar based on the book genre it represents.
Now, when you run the app your chart will look something like this:
Customization
Finally, we are going to do some minor customization to our chart. We'll start by using the chartXAxis modifier to try and force Swift Charts to show all year labels on the x-axis, based on how much space is available. Next, we're going to add labels to the x and y axes, using chartXAxisLabel and chartYAxisLabel. To wrap up, we will move the chart legend to the top. The final chart code will be the following:
And if we run the app one final time:
That's all for this blog post, I hope you learned something new today! You can find the final code on GitHub. If you want to learn more about iOS app development, make sure to check out my YouTube channel!
Comments
Post a Comment