Swift III: A beginner’s guide to Swift Charts
What would developers do if Swift never existed? Act like disgruntled pelicans?
Jokes aside, Swift has become the vital tool of choice for developers for the benefits it brings to the table. And what works even more in Swift’s favor is the regular addition of exciting tools and features. Swift Charts is one such feature that was introduced at WWDC 2022.
Data visualization has always helped simplify complex data sets while enhancing presentation. And now, with the help of Swift Charts, developers can implement the same in their apps.
Introduction to Swift Charts
So, what is Swift Charts? It is a powerful, flexible framework that can create aesthetically pleasing charts using little code. Like SwiftUI, it uses a declarative syntax. Hence, developers familiar with SwiftUI can seamlessly use Swift Charts.
Earlier, developers had to contend with external libraries for creating charts in their apps, but not anymore.
Swift Charts also provides out-of-the-box support for dark mode, device screen sizes, dynamic types, voiceover, audio graphs, localization, and multi-platform support. This exciting framework is available for Xcode 14, while also providing support for iOS 16+, macOS 13+, Mac Catalyst 16+, tvOS 16+, and watchOS 9+.
Exploring Swift Charts
Swift Charts is fun and exciting to use, and it comes with six default chart types called Marks. The six chart types are bar, line, point, area, rule, and rectangle. Additionally, these charts are extensible; hence they can be customized.
Now, let’s explore these charts with the help of an example.
Sip n Snacks is an Indian fast food restaurant that serves three types of dishes — dosa, paratha, and chaat. This restaurant is open to customers during morning and evening hours. So, let’s analyze their sales data during the weekdays with the help of charts. This analysis can help the restaurant to plan its staffing and procurement for the week as per the sales trends.
Let’s start by creating all the enum types that would be required:
- FoodItemType enum with cases for dosa, paratha, and chaat as food items for sale.
- WeekDaysType enum with a case for each day of the week is created.
- TimingType enum with cases for morning and evening hours.
- ChartType enum with cases for different chart types in Swift Charts.
So, the image below shows the model code we will be implementing.
https://gist.github.com/SahilMutualMobile/3b4cb73c87071b0e06a4bc80c3ce0185
Code block 1: Model code
Next, we’ll create two data sets for morning and evening hours. For this, we’ll create two constants — morningSales and eveningSales, which are arrays of RestaurantSales.
Sample data code for morningSales
https://gist.github.com/SahilMutualMobile/3df034bb8029d9e2f0e6b1d5263eb023
Code block 2: morningSales sample data
Sample data code for eveningSales
https://gist.github.com/SahilMutualMobile/fe1912b57d228ecac52d2821380e1681
Code block 3: eveningSales sample data
So, now let’s explore the various types of charts.
Bar charts
The process to create a new chart in Swift starts off by defining a chart block. Additionally, you can also pass a data array within the rounded brackets. In this example, it is an array of RestaurantSales. Since we have to loop through the days of the week, we have to define a ForEach block for the itemSales.
Now, we can create a bar chart with a BarMark block, which will accept x and y coordinates for the graph. In this case, x axis is the days of the week while y axis is the sales numbers.
Since we need to show sales for the various food items, we’re adding a foregroundStyle modifier to the BarMark block with foodItemName. This will show different colors for each food item and Swift will automatically provide the colors for differentiation.
https://gist.github.com/SahilMutualMobile/5dd167f747b8ada1b128af7c9ef25c0e
Code block 4: Bar chart code
Line, point, and rule charts
Line charts in Swift are similar to bar charts with the only difference being the code block, which is shown as LineMark.
There is also an option to superimpose a point chart on a line chart by using a shorthand modifier to the LineMark code block. In this example, we are also superimposing another chart known as the RuleMark, with which we can represent a straight line in the x or y axes. Here, its being used to indicate a breakeven point in sales on the y axis.
https://gist.github.com/SahilMutualMobile/224893cdb9abe2280e39e83cd9b13296
Code block 5: Line chart code with symbol modifier and rule chart overlay
Area chart
Like the LineMark, we can also create an area chart with an AreaMark block.
https://gist.github.com/SahilMutualMobile/b70735017baac6601c84d6ad8a0d07a6
Code block 6: Area chart code
Rectangle chart
Like the LineMark, we can also create an area chart with an RectangleMark block.
https://gist.github.com/SahilMutualMobile/aca67f631be20a98be0021c042b25090
Code block 7: Rectangle chart code
The beauty of Swift Charts
Now, lets take a look at all the charts on a single screen. This can make the visual differences between the various charts easy to understand. Swift Charts provides us with automatic animations during chart transitions, but we have implemented a custom easeIn animation in this case.
https://gist.github.com/SahilMutualMobile/d4e1d4e24444db09133cee2f972853bf
Code block 8: All charts in one screen code
As you can see Swift Charts is fun to use and also adds an interesting feature in iOS apps, which helps enhance user experience.
And that ends the three-part series of our adventures with Swift. So, if you’re looking for an app to be built for iOS, we’d love to hear from you and bounce ideas off together.
