The world’s leading publication for data science, AI, and ML professionals.

Data Visualization With SwiftUI: Bar Charts

Build beautiful charts in your SwiftUI apps

Photo by Lukas Blazek on Unsplash
Photo by Lukas Blazek on Unsplash

Apple introduced SwiftUI in 2019 as a lightweight and easy-to-use way to create user interfaces. This article is the second in a series that explores how the SwiftUI framework can help us build clean, simple, and stunning Data Visualization tools. Today, the spotlight falls on an old workhorse – the Bar Chart.


What Is A Bar Chart?

A bar chart (or bar graph) is a data visualization that deals with categorical data. The chart renders a rectangular bar for all variables, each with a height proportional to the values they represent.

The above text sounds nice, but what does it mean in normal-people language?

A categorical variable is simply a variable that allows us to categorize it according to a set of labels. The labels do not need an internal ordering and may be associated with zero, one, or multiple data points. For example, we can categorize receipts according to the store that issued them. The stores do not have an internal ordering, which means we can’t say that one is smaller or larger than the other (at least not without defining another metric to compare).

The idea of a bar chart is to visualize some ordinal variable associated with our labels. We could choose to represent the number of receipts collected from each store or the total sum of money spent there. Since these metrics fit on the ordinal measurement scale, we can compare them to each other. In the case of our bar chart, we draw a taller bar for the greater metric.

An example of the bar chart we're building in this article.
An example of the bar chart we’re building in this article.

This type of visualization might be appropriate when you are:

  • Comparing your company’s year by year profits.
  • Creating an overview of how much money you’ve spent on clothes, shoes, food, etc.
  • Visualizing your monthly work hours for a given year.

What Do We Need?

Like in the Radar Charts article, we need a solid understanding of Paths and Shapes. We also need to know a little bit about Stacks. Since we introduced Paths and Shapes in the previous article, we move straight to learning about Stacks.

SwiftUI provides Stacks of many flavors, such as VStack, HStack, and ZStack. These components are layout elements whose only mission is to layout their children one after the other in a neat, stack-wise fashion. HStack lays out children horizontally, VStack does it vertically, and ZStacks stack their children along the Z-axis (so, on top of each other). These properties come in handy when we want to render multiple bars next to each other or when we want to place a grid behind those bars.


How Do We Code This Thing?

Let’s start by looking at the foundation of our chart, the BarChart view.

This bad boy contains a lot of customization points. Let’s go through it and make sense of it all.

The body starts by enclosing the chart and its accompanying categories in a vertical stack, ensuring that the labels render below the bars. The chart area consists of an optional BarChartGrid, a BarStack, and some BarChartAxes enclosed in a ZStack, placing them on top of each other.

There are two computed properties (minimum and maximum) defined above the body. These calculate the minimum and maximum values of our data. They also add a little bit of a buffer to the values so that the smallest data point does not end up rendering an invisible bar.

Let’s also have a look at the BarChartGrid and the BarChartAxes:

This Shapes are straight forward enough. BarChartGrid renders a set number of horizontal lines across the chart area. BarChartAxes draws an X-axis and a Y-axis for us.


Drawing the Data

We are getting to the good stuff. It’s time to draw the actual data! Have a look at the code for BarStack:

A lot is going on here, so let’s break it down.

The body creates an HStack to layout our bars in a nice row. It uses a ForEach component to create a linear gradient for each of the data points. Since the linear gradient takes up all available space, we use a BarPath shape to clip it to the right size. As you can see from the code below, the BarPath is just a fancy wrapper around a RoundedRectangle. Last but not least, we sprinkle with some shadows and padding.

Lastly, let’s have a quick look at the LabelStack:

Much like the BarStack, the LabelStack uses an HStack to layout all labels in a row. Since we use the same approach, these will line up well with the bars (given that we use the same number of categories as we pass in data points).

Putting It All Together

The BarChart developed in this article should be good to go. Just plug in your data, make any customizations you want, and hit run!


Are you interested in learning more about software development? Follow me to get notifications when I post new articles.

Until next time, you can read the first article in this series:

Data Visualization With SwiftUI: Radar Charts

You could review a few guidelines for how to solve complex problems:

How to Code When You Don’t Have a Clue

Or you may want to get some tips on how to stay sane while working from home:

How To Stay Sane As A Remote Developer


Related Articles