Mutual Mobile
Published in

Mutual Mobile

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.

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

Code block 2: morningSales sample data

Sample data code for eveningSales

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.

Code block 4: Bar chart code

Image 1: Bar chart iPhone preview

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.

Code block 5: Line chart code with symbol modifier and rule chart overlay

Image 2: Line chart with symbol modifier and rule chart overlay in iPhone preview

‍Area chart

Like the LineMark, we can also create an area chart with an AreaMark block.

Code block 6: Area chart code

Image 3: Area chart iPhone preview

Rectangle chart

Like the LineMark, we can also create an area chart with an RectangleMark block.

Code block 7: Rectangle chart code

Image 4: Rectangle chart iPhone preview

‍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.

Code block 8: All charts in one screen code

Image 5: Preview for all charts on iPhone

‍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.



We bring digital experiences to life through an integrated approach to design and technology.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mutual Mobile

We’re an innovation consultancy that brings digital experiences to life through an integrated approach to design and technology.