
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.

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:
You could review a few guidelines for how to solve complex problems:
Or you may want to get some tips on how to stay sane while working from home: