Bar charts are a fundamental visualization tool used to compare categorical data. They consist of rectangular bars, where the length of each bar represents the value of a specific category. Bar charts are effective for displaying data that can be grouped into discrete categories, such as months, products, or demographics.

Some common uses of bar charts includes:

• Comparing quantities: Comparing the values of different categories or groups. For example, comparing sales figures for different products or regions.

• Showing changes over time: Tracking changes in a quantity over a period of time, such as population growth or stock prices.

• Analyzing distributions: Visualizing the distribution of a categorical variable, such as the frequency of different survey responses.

• Presenting data summaries: Summarizing data in a clear and concise manner.

There are two main types of bar charts:

• Vertical bar charts: The bars are oriented vertically.

• Horizontal bar charts: The bars are oriented horizontally.

Bar charts can be customized with different colors, patterns, and labels to enhance their readability and visual appeal.

Basic Bar Chart

To create a bar chart using the Swift Charts framework, we use the BarMark view. This represents a single bar in the chart. The Chart view acts as a container for BarMark instances.

Let’s start by creating a simple chart view. We will import the Charts framework and then create a Chart view.

A Chart view is a SwiftUI view that displays a chart.

import Charts
import SwiftUI

struct ChartsExampleView: View {
    var body: some View {
            VStack {
                Text("DevTechie.com")
                    .font(.largeTitle)
                Chart {
                   // TODO: add bars
                }
            }
        }
}

#Preview {
    ChartsExampleView()
}

Adding Bars with BarMark

In the chart view, we define the graphical marks used to represent the data. At the heart of the Swift Charts framework is the Plottable protocol, which lets us use any value that conforms to it as a mark. Common types like Int, String, Double, Date, and Decimal already conform to the Plottable protocol by default.

We can also create custom types that conform to this protocol.

To create a bar chart, we begin by adding a single BarMark to the chart. A BarMark uses bars to display data, it takes x and y values as input parameters, which are of type PlottableValue. The PlottableValue type conforms to the Plottableprotocol and provides labeled, plottable data that can be drawn on a chart.

In this example, we will plot daily workout sessions. Let’s start by adding a BarMark for Monday with a workout time of 20 minutes.

import Charts
import SwiftUI

struct ChartsExampleView: View {
    var body: some View {
        VStack {
            Text("DevTechie.com")
                .font(.largeTitle)
            Chart {
                BarMark(
                    x: .value("Day", "Mon"),
                    y: .value("Min", 20)
                )
            }
        }
    }
}

#Preview {
    ChartsExampleView()
}

The Chart view has filled the entire screen and plotted a single bar across the available space. To adjust the chart size, we can use SwiftUI’s frame modifier to set a specific height.

import Charts
import SwiftUI

struct ChartsExampleView: View {
    var body: some View {
        VStack {
            Text("DevTechie.com")
                .font(.largeTitle)
            Chart {
                BarMark(
                    x: .value("Day", "Mon"),
                    y: .value("Min", 20)
                )
            }
            .frame(height: 200)
        }
    }
}

#Preview {
    ChartsExampleView()
}

Let’s add workout sessions for two more days.

import Charts
import SwiftUI

struct ChartsExampleView: View {
    var body: some View {
        VStack {
            Text("DevTechie.com")
                .font(.largeTitle)
            Chart {
                BarMark(
                    x: .value("Day", "Mon"),
                    y: .value("Min", 20)
                )
                BarMark(
                    x: .value("Day", "Tue"),
                    y: .value("Min", 65)
                )
                BarMark(
                    x: .value("Day", "Wed"),
                    y: .value("Min", 45)
                )
            }
            .frame(height: 200)
        }
    }
}

#Preview {
    ChartsExampleView()
}

Notice how the chart view adjusts to accommodate the newly added data. Additionally, all the bars are scaled appropriately.

Quantitative And Nominal Data

Swift Charts support quantitative, nominal, and temporal values. For example, Double is quantitative, String is nominal, and Date is temporal.

• Nominal data: These are categorical values, typically represented as strings, used to group or classify data. They don’t imply any numeric relationship. These are best for labels like product categories, names, cities, or device types.

• Quantitative data: This is a measure of values or counts and is expressed as a number, such as the number of minutes spent on workouts in our example. These are ideal for plotting measurements like sales, temperature, scores, or percentages.

• Temporal data: These are date or time values that represent a moment in time. They are ordered and allow Swift Charts to draw time-series data. These are perfect for trends over time—like stock prices, weather data, or user activity.

In this chart, we are working with two types of data: nominal data, represented by the day of the activity, and quantitative data, represented by the number of minutes spent on the activity. The nominal data is plotted on the x-axis, while the quantitative data is plotted on the y-axis.

BarMark(
    x: .value("Day", "Mon"),
    y: .value("Min", 20)
)

If we switch the axes—placing the nominal data on the y-axis and the quantitative data on the x-axis—we create a horizontal bar chart.

BarMark(
    x: .value("Min", 20),
    y: .value("Day", "Mon")
)

Complete code

import Charts
import SwiftUI

struct ChartsExampleView: View {
    var body: some View {
        VStack {
            Text("DevTechie.com")
                .font(.largeTitle)
            Chart {
                BarMark(
                    x: .value("Min", 20),
                    y: .value("Day", "Mon")
                )
                BarMark(
                    x: .value("Min", 65),
                    y: .value("Day", "Tue")
                )
                BarMark(
                    x: .value("Min", 45),
                    y: .value("Day", "Wed")
                )
            }
            .frame(height: 200)
        }
    }
}

#Preview {
    ChartsExampleView()
}

Conclusion

In this chapter, we learned how to create a chart view and built our first bar chart with the charts framework.