chart on Software Development Notes

Create a Pie or Donut chart with SwiftUI Charts in iOS 17

Eric Callanan — Sunday, 22 Oct 2023

A pie chart is a circular graph that represents data as slices of a whole. Each slice, or “wedge”, represents a portion or percentage of the whole data set. Pie charts can be used to show the composition of a categorical data set, where each category’s size is proportional to its percentage of the whole. This article shows how to create a pie chart and a donut chart and how to customise the appearance of these charts using swift charts.

I have not written an article for a while as I was distracted and I'm training for my first marathon at the end of October. Earlier this year, my brother passed away from cancer and I decided to run the Dublin city Marathon to raise money for the Irish Cancer Society. Here is my fund raising page if you would like to donate to this worthy cause.

In the meantime, iOS 17 has come out and Apple has enhanced the charting capabilities of swift charts. In this article information from the Irish Cancer societies annual report is used to explore the creation and customisation of Pie charts and donut charts in Swift charts.

Related articles on Swift Charts:

Create a line chart with SwiftUI Charts in iOS 16

Customise a line chart with SwiftUI Charts in iOS 16

Create a bar chart with SwiftUI Charts in iOS 16

Visualise the Matthew Effect with Swift Charts

Display top section of Bar Charts with Swift Charts

Add horizontal scroll to charts with SwiftUI Charts in iOS 16

Charts before Swift Charts:

How to create a pie chart in SwiftUI

Bar chart of the data

Start with a bar chart using Swift Charts, which was introduced in 2022 with iOS 16. The data used in this article is from the Irish Cancer Society Annual Report 2022. The breakdown of the income data in the following tables is used for the pie and donut charts.

First the date is defined as an array of IncomeData that contains a category and an amount. Swift Chart iterates over the array and creates a BarMark for each item.

Income for Irish Cancer Society from different sources in 2021 and 2022

Income	2021	2022
Donations and legacies	€22.0m	€19.8m
Trading activities	€2.5m	€4.2m
Charitable activities	€1.7m	€2.4m
Other and investment	€0.4m	€0.2m
=======================	==========	==========
Total income	€26.6m	€26.6m

Breakdown of income in Donations and legacies in 2022

Income	2022
Legacies	€2.4m
Individual giving	€3.2m
Philanthropy and corporate partnerships	€4.0m
Daffodil Day	€4.7m
Other national campaigns and donations	€5.5m
============================================	==========
Total Donations and legacies	€19.8m

Income Data

 1struct IncomeData: Identifiable, Equatable {
 2    var category: String
 3    var amount: Double
 4    var id = UUID()
 5}
 6
 7let totalIncomeData: [IncomeData] = [
 8    .init(category: "Donations and legacies", amount: 19.8),
 9    .init(category: "Trading activities", amount: 4.2),
10    .init(category: "Charitable activities", amount: 2.4),
11    .init(category: "Other and investment", amount: 0.2)
12]
13
14let donationsIncomeData: [IncomeData] = [
15    .init(category: "Legacies", amount: 2.4),
16    .init(category: "Other national campaigns and donations", amount: 5.5),
17    .init(category: "Daffodil Day", amount: 4.7),
18    .init(category: "Philanthropy and corporate partnerships", amount: 4.0),
19    .init(category: "Individual giving", amount: 3.2)
20]

BarChartView

 1struct BarChartView: View {
 2    var body: some View {
 3        VStack {
 4            GroupBox ( "Bar Chart - 2022 Income (€ million)") {
 5                Chart(totalIncomeData) {
 6                    BarMark(
 7                        x: .value("Category", $0.category),
 8                        y: .value("Amount", $0.amount)
 9                    )
10                }
11            }
12            .frame(height: 300)
13            
14            GroupBox ("2022 Donations and legacies (€ million)") {
15                Chart(donationsIncomeData) {
16                    BarMark(
17                        x: .value("Category", $0.category),
18                        y: .value("Amount", $0.amount)
19                    )
20                }
21            }
22            .frame(height: 300)
23
24            Spacer()
25        }
26        .padding()
27    }
28}

Swift Bar Chart showing income for Irish Cancer Society for 2022

Use SectorMark to create a Pie Chart

The reason to start with the Bar chart is that is is easy to convert it to a Pie chart by replacing BarMark with SectorMark for each item in the array. The size of each sector is calculated as a percentage of the whole automatically. The sectors in the pie chart start at 12 o'clock and move in a clockwise direction.

BarAndPieChartView

 1struct BarAndPieChartView: View {
 2    var body: some View {
 3        VStack {
 4            GroupBox ( "Bar Chart - 2022 Donations and legacies (€ million)") {
 5                Chart(donationsIncomeData) {
 6                    BarMark(
 7                        x: .value("Amount", $0.amount),
 8                        stacking: .normalized
 9                    )
10                    .foregroundStyle(by: .value("category", $0.category))
11                }
12            }
13            .frame(height: 200)
14            
15            GroupBox ( "Pie Chart - 2022 Donations and legacies (€ million)") {
16                Chart(donationsIncomeData) {
17                    SectorMark(
18                        angle: .value("Amount", $0.amount)
19                    )
20                    .foregroundStyle(by: .value("category", $0.category))
21                }
22            }
23            .frame(height: 500)
24            
25            Spacer()
26        }
27        .padding()
28    }
29}

Swift Bar and Pie charts showing income for Irish Cancer Society for 2022

Add Spaces and rounded corners

A space can be added between the sectors of a pie chart by specifying a value for angularInset, which takes an optional CGFloat. The angularInset specifies the space that the inner lines of a Sector can be set. It is not clear what units this value is in and the documentation states "A radius for the corners of the sector." - which I believe should be the description for the cornerRadius. I found that the angularInset can be set to any value between 0.0 and 8.2, well it can be set to any value but only values between 0.0 and 8.8 have any impact on the Pie Chart.

The cornerRadius modifier is used to apply a rounded corner to the outer curve of the sector.

RoundedSectorSpaceView

 1struct RoundedSectorSpaceView: View {
 2    var body: some View {
 3        VStack {
 4            GroupBox ( "2022 Donations and Legacies (€ million)") {
 5                Chart(donationsIncomeData) {
 6                    SectorMark(
 7                        angle: .value("Amount", $0.amount),
 8                        angularInset: 3.0
 9                    )
10                    .cornerRadius(6.0)
11                    .foregroundStyle(by: .value("category", $0.category))
12                }
13            }
14            .frame(height: 500)
15            
16            Spacer()
17        }
18        .padding()
19    }
20}

Swift Pie chart with spaces between sectors and rounded corners

Create Donut chart

A donut chart (or doughnut chart) a variation of the pie chart and is often used to display data in a way that emphasizes the parts of a whole and their relationships. Donut charts are popular in data analysis, business presentations, and reports. A Pie chart can easily be displayed as a Donut chart in Swift Charts by specifying an innerRadius for each SectorMark. This is a MarkDimension and can be set as a size in points, or a .ratio or .inset relative to the outer radius.

View

 1struct DonutChartView: View {
 2    var body: some View {
 3        VStack {
 4            GroupBox ( "2022 Donations and Legacies (€ million)") {
 5                Chart(donationsIncomeData) {
 6                    SectorMark(
 7                        angle: .value("Amount", $0.amount),
 8                        innerRadius: .ratio(0.6),
 9                        angularInset: 3.0
10                    )
11                    .cornerRadius(6.0)
12                    .foregroundStyle(by: .value("category", $0.category))
13                }
14            }
15            .frame(height: 500)
16            
17            Spacer()
18        }
19        .padding()
20    }
21}

Swift donut chart with spaces between sectors and rounded corners

Use custom colors

The default colors in Swift Charts are great, but sometimes it can be good to use a set of colors customised to the App. Like other charts, there are a number of ways to set the colors. One way is to set the color for each SectorMark, but this can be tricky to use when different charts will have different number of categories. An alternative is to specify an array or colors as shown below. Then use chartForegroundStyleScale to bind the categories to the range of colors. Here just 10 colors are set as Pie charts with more than 5 or so sectors are difficult to interpret. The good news is that even if a chart is created with more than 10 categories, the colors simply roll around to the first color again.

chartColors

 1let chartColors: [Color] = [
 2    Color(red: 0.55, green: 0.83 , blue: 0.78),
 3    Color(red: 1.00, green: 1.00 , blue: 0.70),
 4    Color(red: 0.75, green: 0.73 , blue: 0.85),
 5    Color(red: 0.98, green: 0.50 , blue: 0.45),
 6    Color(red: 0.50, green: 0.69 , blue: 0.83),
 7    Color(red: 0.99, green: 0.71 , blue: 0.38),
 8    Color(red: 0.70, green: 0.87 , blue: 0.41),
 9    Color(red: 0.99, green: 0.80 , blue: 0.90),
10    Color(red: 0.85, green: 0.85 , blue: 0.85),
11    Color(red: 0.74, green: 0.50 , blue: 0.74),
12    Color(red: 0.80, green: 0.92 , blue: 0.77),
13    Color(red: 1.00, green: 0.93 , blue: 0.44)
14]

PieChartColorsView

 1struct PieChartColorsView: View {
 2    var body: some View {
 3        VStack {
 4            GroupBox ( "2022 Donations and Legacies (€ million)") {
 5                Chart(donationsIncomeData) {
 6                    SectorMark(
 7                        angle: .value("Amount", $0.amount),
 8                        angularInset: 3.0
 9                    )
10                    .cornerRadius(6.0)
11                    .foregroundStyle(by: .value("category", $0.category))
12                }
13                // Set color for each data in the chart
14                .chartForegroundStyleScale(
15                    domain: donationsIncomeData.map  { $0.category },
16                    range: chartColors
17                )
18
19                // Position the Legend
20                .chartLegend(position: .top, alignment: .center)
21            }
22            .frame(height: 500)
23            
24            Spacer()
25        }
26        .padding()
27    }
28}

Specify custom colors for Pie chart in Swift Charts

Make donut chart interactive

The advantage of a touch screen is the ability for Apps to come to life when they are touched. Charts can display more information when sections of the chart are touched. chartAngleSelection is used in Pie and Donut charts to identify where in the chart data has been selected. This is similar to chartXSelection or chartYSelection in line or bar charts. chartAngleSelection can be a little confusing to use at first. There is a commented out section of the code below to display the currently selected angle in a Text view to help understand what is happening. The selected angle is automatically converted from an angle to a value representing the cumulative sum of the amounts to that point. A state variable is used to bind to the current selected angle and a computed property is used to convert this value to the appropriate incomeData sector of the chart.

InteractiveDonutView

 1struct InteractiveDonutView: View {
 2    @State private var selectedAmount: Double? = nil
 3    let cumulativeIncomes: [(category: String, range: Range<Double>)]
 4
 5    init() {
 6        var cumulative = 0.0
 7        self.cumulativeIncomes = donationsIncomeData.map {
 8            let newCumulative = cumulative + Double($0.amount)
 9            let result = (category: $0.category, range: cumulative ..< newCumulative)
10            cumulative = newCumulative
11            return result
12        }
13    }
14
15    var selectedCategory: IncomeData? {
16        if let selectedAmount,
17           let selectedIndex = cumulativeIncomes
18            .firstIndex(where: { $0.range.contains(selectedAmount) }) {
19            return donationsIncomeData[selectedIndex]
20        }
21        return nil
22    }
23    
24    var body: some View {
25        VStack {
26            GroupBox ( "2022 Donations and Legacies (€ million)") {
27                Chart(donationsIncomeData) {
28                    SectorMark(
29                        angle: .value("Amount", $0.amount),
30                        innerRadius: .ratio(selectedCategory == $0 ? 0.5 : 0.6),
31                        outerRadius: .ratio(selectedCategory == $0 ? 1.0 : 0.9),
32                        angularInset: 3.0
33                    )
34                    .cornerRadius(6.0)
35                    .foregroundStyle(by: .value("category", $0.category))
36                    
37                    .opacity(selectedCategory == $0 ? 1.0 : 0.9)
38                }
39                // Set color for each data in the chart
40                .chartForegroundStyleScale(
41                    domain: donationsIncomeData.map  { $0.category },
42                    range: chartColors
43                )
44                
45                // Position the Legend
46                .chartLegend(position: .bottom, alignment: .center)
47                
48                // Select a sector
49                .chartAngleSelection(value: $selectedAmount)
50                
51                // Display data for selected sector
52                .chartBackground { chartProxy in
53                    GeometryReader { geometry in
54                        let frame = geometry[chartProxy.plotFrame!]
55                        VStack(spacing: 0) {
56                            Text(selectedCategory?.category ?? "")
57                                .multilineTextAlignment(.center)
58                                .font(.body)
59                                .foregroundStyle(.secondary)
60                                .frame(width: 120, height: 80)
61                            Text("€\(selectedCategory?.amount ?? 0, specifier: "%.1f") M")
62                                .font(.title.bold())
63                                .foregroundColor((selectedCategory != nil) ? .primary : .clear)
64                        }
65                        .position(x: frame.midX, y: frame.midY)
66                    }
67                }
68                
69            }
70            .frame(height: 500)
71            
72//            // Testing chartAngleSelection
73//            Text("SelectedAmount")
74//            Text(selectedAmount?.formatted() ?? "none")
75
76            Spacer()
77        }
78        .padding()
79    }
80}

Interactive Donut chart in Swift Charts

Pie or Donut chart with sorted data

The convention of displaying data in a Pie chart is to arrange the sectors from largest to smallest. It would have been good to have some property in the pie chart to sort the data, but there does not appear to be one. The work around is to create a copy of the data and sort it before creating the Pie/Donut chart. In a production app, the data would likely be in a model, which could possibly return the data in a sorted manner. This shows the largest sector on the top right at 12 o'clock, with the next sector following in a clockwise direction.

DonutChartSortedView

 1struct DonutChartSortedView: View {
 2    @State private var selectedAmount: Double? = nil
 3    let cumulativeIncomes: [(category: String, range: Range<Double>)]
 4    
 5    var donationsIncomeDataSorted = donationsIncomeData
 6    
 7    init() {
 8        donationsIncomeDataSorted.sort {
 9            $0.amount > $1.amount
10        }
11
12        var cumulative = 0.0
13        self.cumulativeIncomes = donationsIncomeDataSorted.map {
14            let newCumulative = cumulative + Double($0.amount)
15            let result = (category: $0.category, range: cumulative ..< newCumulative)
16            cumulative = newCumulative
17            return result
18        }
19    }
20
21    var selectedCategory: IncomeData? {
22        if let selectedAmount,
23           let selectedIndex = cumulativeIncomes
24            .firstIndex(where: { $0.range.contains(selectedAmount) }) {
25            return donationsIncomeDataSorted[selectedIndex]
26        }
27        return nil
28    }
29    
30    var body: some View {
31        VStack {
32            GroupBox ( "2022 Donations and Legacies (€ million)") {
33                Chart(donationsIncomeDataSorted) {
34                    SectorMark(
35                        angle: .value("Amount", $0.amount),
36                        innerRadius: .ratio(selectedCategory == $0 ? 0.5 : 0.6),
37                        outerRadius: .ratio(selectedCategory == $0 ? 1.0 : 0.9),
38                        angularInset: 3.0
39                    )
40                    .cornerRadius(6.0)
41                    .foregroundStyle(by: .value("category", $0.category))
42                    
43                    .opacity(selectedCategory == $0 ? 1.0 : 0.8)
44                }
45                // Set color for each data in the chart
46                .chartForegroundStyleScale(
47                    domain: donationsIncomeDataSorted.map  { $0.category },
48                    range: chartColors
49                )
50                
51                // Position the Legend
52                .chartLegend(position: .top, alignment: .center)
53                
54                // Select a sector
55                .chartAngleSelection(value: $selectedAmount)
56                
57                .chartBackground { chartProxy in
58                    GeometryReader { geometry in
59                        let frame = geometry[chartProxy.plotFrame!]
60                        VStack(spacing: 0) {
61                            Text(selectedCategory?.category ?? "")
62                                .multilineTextAlignment(.center)
63                                .font(.body)
64                                .foregroundStyle(.secondary)
65                                .frame(width: 120, height: 80)
66                            Text("\(selectedCategory?.amount ?? 0, specifier: "%.1f")")
67                                .font(.title.bold())
68                                .foregroundColor((selectedCategory != nil) ? .primary : .clear)
69                        }
70                        .position(x: frame.midX, y: frame.midY)
71                    }
72                }
73                
74            }
75            .frame(height: 500)
76            
77            Spacer()
78        }
79        .padding()
80    }
81}

Interactive Donut chart displaying data sorted from largest to smallest in Swift Charts

Add Text onto the Pie chart

Finally, annotations can be used on Pie/Donut charts in a similar mechanism to other Swift Charts. Here an overlay is added for each sector displaying the value for each sector.

DonutWithLabelsView

 1struct DonutWithLabelsView: View {
 2    @State private var selectedAmount: Double? = nil
 3    let cumulativeIncomes: [(category: String, range: Range<Double>)]
 4    
 5    var donationsIncomeDataSorted = donationsIncomeData
 6    
 7    init() {
 8        donationsIncomeDataSorted.sort {
 9            $0.amount > $1.amount
10        }
11
12        var cumulative = 0.0
13        self.cumulativeIncomes = donationsIncomeDataSorted.map {
14            let newCumulative = cumulative + Double($0.amount)
15            let result = (category: $0.category, range: cumulative ..< newCumulative)
16            cumulative = newCumulative
17            return result
18        }
19    }
20
21    var selectedCategory: IncomeData? {
22        if let selectedAmount,
23           let selectedIndex = cumulativeIncomes
24            .firstIndex(where: { $0.range.contains(selectedAmount) }) {
25            return donationsIncomeDataSorted[selectedIndex]
26        }
27        return nil
28    }
29    
30    var body: some View {
31        VStack {
32            GroupBox ( "2022 Donations and Legacies (€ million)") {
33                Chart(donationsIncomeDataSorted) { income in
34                    let amountStr = "\(income.amount)"
35                    SectorMark(
36                        angle: .value("Amount", income.amount),
37                        innerRadius: .ratio(selectedCategory == income ? 0.5 : 0.6),
38                        outerRadius: .ratio(selectedCategory == income ? 1.0 : 0.9),
39                        angularInset: 3.0
40                    )
41                    .cornerRadius(6.0)
42                    .foregroundStyle(by: .value("category", income.category))
43                    .opacity(selectedCategory == income ? 1.0 : 0.8)
44                    .annotation(position: .overlay) {
45                        Text(amountStr)
46                            .font(selectedCategory == income ? .title : .headline)
47                            .fontWeight(.bold)
48                            .padding(5)
49                            .background(Color.white.opacity(0.4))
50                    }
51                }
52                // Set color for each data in the chart
53                .chartForegroundStyleScale(
54                    domain: donationsIncomeDataSorted.map  { $0.category },
55                    range: chartColors
56                )
57                
58                // Position the Legend
59                .chartLegend(position: .top, alignment: .center)
60                
61                // Select a sector
62                .chartAngleSelection(value: $selectedAmount)
63                
64                .chartBackground { chartProxy in
65                    GeometryReader { geometry in
66                        let frame = geometry[chartProxy.plotFrame!]
67                        VStack(spacing: 0) {
68                            Text(selectedCategory?.category ?? "")
69                                .multilineTextAlignment(.center)
70                                .font(.body)
71                                .foregroundStyle(.secondary)
72                                .frame(width: 120, height: 80)
73                            Text("\(selectedCategory?.amount ?? 0, specifier: "%.1f")")
74                                .font(.title.bold())
75                                .foregroundColor((selectedCategory != nil) ? .primary : .clear)
76                        }
77                        .position(x: frame.midX, y: frame.midY)
78                    }
79                }
80                
81            }
82            .frame(height: 500)
83            
84            Spacer()
85        }
86        .padding()
87    }
88}

Interactive Donut chart with Sector labels in Swift Charts

Conclusion

Pie charts are useful for visualizing data with a small number of categories and are commonly used in presentations and reports to make data more accessible and understandable. Pie Charts seemed a bit of an omission from Swift Charts when they were released in iOS 16 and this has now been rectified in iOS 17. A donut chart is a variation on a pie chart where the centre of the pie is removed.

Creating pie charts is similar to other Swift Charts with use of the SectorMark that was added in iOS 17. Each sector represents a category of the data and they are arranged clockwise from 12 o'clock. A Donut chart can be created by specifying an innerRadius to cut out the inner part of the pie chart. This center space can be used to display additional information. The pie/Donut chart can be customised like other Swift Charts, such as changing the colors, moving or hiding the legend. The Pie and Donut charts are a great addition to Swift Charts.

The source code for PieChartApp is available on GitHub.

Display top section of Bar Charts with Swift Charts

Eric Callanan — Sunday, 23 Oct 2022

There are times when data in a bar chart has similar values for a number of the bars and it can be difficult to see the differences. One option is to zoom in on the top section of the bar chart. This article investigates a number of options and identifies the best approach for this in Swift Charts.

Related articles on Swift Charts:

Create a line chart with SwiftUI Charts in iOS 16

Customise a line chart with SwiftUI Charts in iOS 16

Create a bar chart with SwiftUI Charts in iOS 16

Visualise the Matthew Effect with Swift Charts

Display a bar chart

SwiftUI Charts, introduced in iOS 16, makes it easy to create charts such as the following bar chart. Define an array of data and pass it to a Chart, creating a BarMark for each element in the array.

 1struct Data: Identifiable {
 2    var name: String
 3    var value: Int
 4    var id = UUID()
 5}
 6
 7let chartData: [Data] = [.init(name: "Square", value: 45),
 8                         .init(name: "Circle", value: 42),
 9                         .init(name: "Triangle", value: 46),
10                         .init(name: "Hexagon", value: 43)]

 1struct BarView1: View {
 2    var mean: Double {
 3        return Double(chartData.reduce(0) { $0 + $1.value }) / Double(chartData.count)
 4    }
 5    
 6    var body: some View {
 7        ZStack {
 8            Color(hue: 0.58, saturation: 0.17, brightness: 1.0)
 9                    .edgesIgnoringSafeArea(.all)
10
11            VStack {
12                GroupBox("Results - full bars displayed") {
13                    Chart(chartData) { values in
14                        BarMark(
15                            x: .value("name", values.name),
16                            y: .value("value", values.value)
17                        )
18                        .foregroundStyle(Colors.barColor)
19                        .cornerRadius(10.0)
20                        .annotation(position: .overlay, alignment: .top, spacing: 15.0) {
21                            Text("\(values.value)")
22                                .font(.caption2)
23                                .foregroundColor(.white)
24                                .fontWeight(.bold)
25                                .padding(2)
26                        }
27                        
28                        RuleMark(y: .value("mean", mean))
29                            .foregroundStyle(Colors.lineColor)
30                            .annotation(position: .overlay,
31                                        alignment: .bottomTrailing,
32                                        spacing: 20) {
33                                Text("mean = \(String(format: "%.1f", mean))")
34                                    .foregroundColor(Colors.lineColor)
35                            }
36                    }
37                    .chartYAxis {
38                        AxisMarks(position: .leading) { _ in
39                           AxisValueLabel()
40                        }
41                    }
42                    .chartXAxis {
43                        AxisMarks(position: .bottom) { _ in
44                            AxisGridLine()
45                            AxisValueLabel()
46                        }
47                    }
48                    .padding()
49                }
50                .frame(height: 400)
51                Spacer()
52            }
53        }
54    }
55}

 1struct Colors {
 2    static let barColor = Color(hue: 0.8, saturation: 0.7, brightness: 0.5)
 3    static let lineColor = Color(hue: 0.4, saturation: 0.5, brightness: 0.5)
 4    static let bgPlotColor = Color(hue: 0.12, saturation: 0.10, brightness: 0.92)
 5
 6    static let bgGradient = LinearGradient(
 7        gradient: Gradient(colors: [
 8            Color(hue: 0.10, saturation: 0.10, brightness: 1.0),
 9            Color(hue: 0.10, saturation: 0.20, brightness: 0.95)
10        ]),
11        startPoint: .topLeading,
12        endPoint: .bottomTrailing)
13}

Starting bar chart with 4 bars of data close together in SwiftUI

Starting bar chart with 4 bars of data close together in SwiftUI

Zoom in on top section of bar chart

It can be difficult to see the differences between the bars when all the values are similar. One way to improve this is with the use of annotation to add the values to the bars. Another option is to zoom the y-axis to just show the top section of the bars, which can be achieved using chartYScale. The bar chart is updated to set the Domain for the y-axis to a range from 40 to 48.

The results are surprising, The plot area is correctly set for the y-axis from 40 to 48, however the bars in the bar chart extend below the plot area and below the chart. These bars are displayed over any content that may be placed below the chart.

 1struct BarView2: View {
 2    var mean: Double {
 3        return Double(chartData.reduce(0) { $0 + $1.value }) / Double(chartData.count)
 4    }
 5    
 6    var body: some View {
 7        ZStack {
 8            Color(hue: 0.58, saturation: 0.17, brightness: 1.0)
 9                    .edgesIgnoringSafeArea(.all)
10
11            VStack {
12                GroupBox("Results - top bars - extend below chart") {
13                    Chart(chartData) { values in
14                        BarMark(
15                            x: .value("name", values.name),
16                            y: .value("value", values.value)
17                        )
18                        .foregroundStyle(Colors.barColor)
19                        .cornerRadius(10.0)
20                        .annotation(position: .overlay, alignment: .top, spacing: 15.0) {
21                            Text("\(values.value)")
22                                .font(.caption2)
23                                .foregroundColor(.white)
24                                .fontWeight(.bold)
25                                .padding(2)
26                        }
27                        
28                        RuleMark(y: .value("mean", mean))
29                            .foregroundStyle(Colors.lineColor)
30                            .annotation(position: .overlay,
31                                        alignment: .bottomTrailing,
32                                        spacing: 20) {
33                                Text("mean = \(String(format: "%.1f", mean))")
34                                    .foregroundColor(Colors.lineColor)
35                            }
36                    }
37                    .chartYScale(domain: 40...48)
38                    .chartYAxis {
39                        AxisMarks(position: .leading) { _ in
40                           AxisValueLabel()
41                        }
42                    }
43                    .chartXAxis {
44                        AxisMarks(position: .bottom) { _ in
45                            AxisGridLine()
46                            AxisValueLabel()
47                        }
48                    }
49                    .padding()
50                }
51                .frame(height: 400)
52                Spacer()
53            }
54        }
55    }
56}

Display top bars using y-scale results in bars extending below the chart

Display top bars using y-scale results in bars extending below the chart

Use Group Box Style

A lot of iOS apps use card-type views to separate sections in an App. The use of groupboxes is good for layout and groupBoxStyle can be used to set consistent styles for various sections of an app. It is surprising that applying a groupBoxStyle cuts off the extended bars in the bar chart at the edge of the GroupBox. This helps to have the bars not block other content, but the bars are still extended below the plot area.

 1struct YellowGroupBoxStyle: GroupBoxStyle {
 2    func makeBody(configuration: Configuration) -> some View {
 3        configuration.content
 4            .padding(.top, 20)
 5            .padding(10)
 6            .background(Colors.bgGradient)
 7            .cornerRadius(15)
 8            .shadow(radius: 6.0, x: 6.0, y: 8.0)
 9            .overlay(
10                configuration.label.padding(12),
11                alignment: .topLeading
12            )
13            .padding()
14    }
15}

 1struct BarView3: View {
 2    var mean: Double {
 3        return Double(chartData.reduce(0) { $0 + $1.value }) / Double(chartData.count)
 4    }
 5    
 6    var body: some View {
 7        ZStack {
 8            Color(hue: 0.58, saturation: 0.17, brightness: 1.0)
 9                    .edgesIgnoringSafeArea(.all)
10            VStack {
11                GroupBox("Results - top bars - groupBoxStyle") {
12                    Chart(chartData) { values in
13                        BarMark(
14                            x: .value("name", values.name),
15                            y: .value("value", values.value)
16                        )
17                        .foregroundStyle(Colors.barColor)
18                        .cornerRadius(10.0)
19                        .annotation(position: .overlay, alignment: .top, spacing: 15.0) {
20                            Text("\(values.value)")
21                                .font(.caption2)
22                                .foregroundColor(.white)
23                                .fontWeight(.bold)
24                                .padding(2)
25                        }
26                        
27                        RuleMark(y: .value("mean", mean))
28                            .foregroundStyle(Colors.lineColor)
29                            .annotation(position: .overlay,
30                                        alignment: .bottomTrailing,
31                                        spacing: 20) {
32                                Text("mean = \(String(format: "%.1f", mean))")
33                                    .foregroundColor(Colors.lineColor)
34                            }
35                    }
36                    .chartYScale(domain: 40...48)
37                    .chartYAxis {
38                        AxisMarks(position: .leading) { _ in
39                           AxisValueLabel()
40                        }
41                    }
42                    .chartXAxis {
43                        AxisMarks(position: .bottom) { _ in
44                            AxisGridLine()
45                            AxisValueLabel()
46                        }
47                    }
48                    .padding()
49                }
50                .groupBoxStyle(YellowGroupBoxStyle())
51                .frame(height: 400)
52                Spacer()
53            }
54        }
55    }
56}

Use of GroupBoxStyle cuts the bars off at the edge of the GroupBox

Use of GroupBoxStyle cuts the bars off at the edge of the GroupBox

Clip the bar chart

The Chart can be modified with the clipped method and this almost works. The bars seem to be clipped below the plot area, including the x-axis labels with the effect that the x-axis labels are covered over with the extended bars.

 1struct BarView4: View {
 2    var mean: Double {
 3        return Double(chartData.reduce(0) { $0 + $1.value }) / Double(chartData.count)
 4    }
 5    
 6    var body: some View {
 7        ZStack {
 8            Color(hue: 0.58, saturation: 0.17, brightness: 1.0)
 9                    .edgesIgnoringSafeArea(.all)
10
11            VStack {
12                GroupBox("Results - top bars - clipped") {
13                    Chart(chartData) { values in
14                        BarMark(
15                            x: .value("name", values.name),
16                            y: .value("value", values.value)
17                        )
18                        .foregroundStyle(Colors.barColor)
19                        .cornerRadius(10.0)
20                        .annotation(position: .overlay, alignment: .top, spacing: 15.0) {
21                            Text("\(values.value)")
22                                .font(.caption2)
23                                .foregroundColor(.white)
24                                .fontWeight(.bold)
25                                .padding(2)
26                        }
27                        
28                        RuleMark(y: .value("mean", mean))
29                            .foregroundStyle(Colors.lineColor)
30                            .annotation(position: .overlay,
31                                        alignment: .bottomTrailing,
32                                        spacing: 20) {
33                                Text("mean = \(String(format: "%.1f", mean))")
34                                    .foregroundColor(Colors.lineColor)
35                            }
36                    }
37                    .chartYScale(domain: 40...48)
38                    .clipped()
39                    .chartYAxis {
40                        AxisMarks(position: .leading) { _ in
41                           AxisValueLabel()
42                        }
43                    }
44                    .chartXAxis {
45                        AxisMarks(position: .bottom) { _ in
46                            AxisGridLine()
47                            AxisValueLabel()
48                        }
49                    }
50                    .padding()
51                }
52                .groupBoxStyle(YellowGroupBoxStyle())
53                .frame(height: 400)
54                Spacer()
55            }
56        }
57    }
58}

Use of Clipped cuts the base of the bars off, but covers the x-axis labels

Use of Clipped cuts the base of the bars off, but covers the x-axis labels

Use yStart and yEnd on bar chart

The solution is to take a closer look at BarMark and the initialiser init(x:yStart:yEnd:width:). In this initialiser, a start value and an end value can be specified for the bar mark rather than a single y-value for each element in the array of data. Change the BarMark to specify x, yStart and yEnd values, using a constant for the start values - the same constant as is used for the starting range in the chartYScale domain.

 1struct BarView5: View {
 2    var mean: Double {
 3        return Double(chartData.reduce(0) { $0 + $1.value }) / Double(chartData.count)
 4    }
 5    
 6    let minValue = 40
 7    let maxValue = 48
 8
 9    var body: some View {
10        ZStack {
11            Color(hue: 0.58, saturation: 0.17, brightness: 1.0)
12                    .edgesIgnoringSafeArea(.all)
13
14            VStack {
15                GroupBox("Results - top bars - yStart & yEnd") {
16                    Chart(chartData) { values in
17                        BarMark(
18                            x: .value("name", values.name),
19                            yStart:  .value("value", minValue),
20                            yEnd: .value("value", values.value)
21                        )
22                        .foregroundStyle(Colors.barColor)
23                        .cornerRadius(5.0)
24                        .annotation(position: .overlay,
25                                    alignment: .top) {
26                            Text("\(values.value)")
27                                .font(.footnote)
28                                .foregroundColor(.white)
29                                .fontWeight(.bold)
30                                .offset(y:30)
31                        }
32                        RuleMark(y: .value("mean", mean))
33                            .foregroundStyle(Colors.lineColor)
34                            .annotation(position: .overlay,
35                                        alignment: .bottomTrailing,
36                                        spacing: 5) {
37                                Text("mean = \(String(format: "%.2f", mean))")
38                                    .foregroundColor(Colors.lineColor)
39                            }
40                    }
41                    .chartYAxis {
42                        AxisMarks(position: .leading)
43                    }
44                    .padding()
45                    .chartYScale(domain: minValue...maxValue)
46                }
47                .groupBoxStyle(YellowGroupBoxStyle())
48                .frame(height: 400)
49                Spacer()
50            }
51        }
52    }
53}

Use of yStart and yEnd correctly displays the top section of the bars in SwiftUI

Use of yStart and yEnd correctly displays the top section of the bars in SwiftUI

Use RectangleMark

Finally we have what we wanted where the bottom sections of the bars are excluded and the bar chart is zoomed in on the top section of the chart. Is this still a bar chart? An alternative is to move away from BarMark and use RectangleMark instead. The same data is charted with BarMark and RectangleMark below with identical results produced..

 1struct RectangleMarkView: View {
 2    var mean: Double {
 3        return Double(chartData.reduce(0) { $0 + $1.value }) / Double(chartData.count)
 4    }
 5    
 6    let minValue = 40
 7    let maxValue = 48
 8
 9    var body: some View {
10        ZStack {
11            Color(hue: 0.58, saturation: 0.17, brightness: 1.0)
12                    .edgesIgnoringSafeArea(.all)
13
14            VStack {
15                HStack {
16                    GroupBox("Results - BarMark") {
17                        Chart(chartData) { values in
18                            BarMark(
19                                x: .value("name", values.name),
20                                yStart:  .value("value", minValue),
21                                yEnd: .value("value", values.value)
22                            )
23                            .foregroundStyle(Colors.barColor)
24                            .cornerRadius(5.0)
25                            .annotation(position: .overlay,
26                                        alignment: .top) {
27                                Text("\(values.value)")
28                                    .font(.footnote)
29                                    .foregroundColor(.white)
30                                    .fontWeight(.bold)
31                                    .offset(y:30)
32                            }
33                            RuleMark(y: .value("mean", mean))
34                                .foregroundStyle(Colors.lineColor)
35                                .annotation(position: .overlay,
36                                            alignment: .bottomTrailing,
37                                            spacing: 5) {
38                                    Text("\(String(format: "%.1f", mean))")
39                                        .foregroundColor(Colors.lineColor)
40                                }
41                        }
42                        .chartYAxis {
43                            AxisMarks(position: .leading)
44                        }
45                        .padding()
46                        .chartYScale(domain: minValue...maxValue)
47                    }
48                    .groupBoxStyle(YellowGroupBoxStyle())
49
50                    GroupBox("Results - RectangleMark") {
51                        Chart(chartData) { values in
52                            RectangleMark(
53                                x: .value("name", values.name),
54                                yStart:  .value("value", minValue),
55                                yEnd: .value("value", values.value)
56                            )
57                            .foregroundStyle(Colors.barColor)
58                            .cornerRadius(5.0)
59                            .annotation(position: .overlay,
60                                        alignment: .top) {
61                                Text("\(values.value)")
62                                    .font(.footnote)
63                                    .foregroundColor(.white)
64                                    .fontWeight(.bold)
65                                    .offset(y:30)
66                            }
67                            RuleMark(y: .value("mean", mean))
68                                .foregroundStyle(Colors.lineColor)
69                                .annotation(position: .overlay,
70                                            alignment: .bottomTrailing,
71                                            spacing: 5) {
72                                    Text("\(String(format: "%.1f", mean))")
73                                        .foregroundColor(Colors.lineColor)
74                                }
75                        }
76                        .chartYAxis {
77                            AxisMarks(position: .leading)
78                        }
79                        .padding()
80                        .chartYScale(domain: minValue...maxValue)
81                    }
82                    .groupBoxStyle(YellowGroupBoxStyle())
83                }
84                .frame(height: 350)
85            }
86        }
87    }
88}

RectangleMark may be more appropriate to use rather than BarMark when not showing the entire bar in the chart

RectangleMark may be more appropriate to use rather than BarMark when not showing the entire bar in the chart

Use line chart instead

Both BarMark and RectangleMark produce identical results with bar charts zoomed in on the top section of the bars. This chart could be open to misinterpretation as in the examples above the bar for 46 looks to be twice as much as the bar for 43 (because it is) - however, the underlying data has not doubled. There may be an assumption, when glancing at a bar chart, that the bar represents the size of the data.

A line chart, using LineMark, might be more appropriate when trying to communicate differences between one category an the next.

 1struct LineChartView: View {
 2    var mean: Double {
 3        return Double(chartData.reduce(0) { $0 + $1.value }) / Double(chartData.count)
 4    }
 5    
 6    var body: some View {
 7        ZStack {
 8            Color(hue: 0.58, saturation: 0.17, brightness: 1.0)
 9                    .edgesIgnoringSafeArea(.all)
10
11            VStack {
12                GroupBox("Results - LineMark") {
13                    Chart(chartData) { values in
14                        LineMark(
15                            x: .value("name", values.name),
16                            y: .value("value", values.value)
17                        )
18                        .foregroundStyle(Colors.barColor)
19                        .symbol(by: .value("data", "value"))
20                        .symbolSize(150)
21                        .annotation(position: .overlay,
22                                    alignment: .top) {
23                            Text("\(values.value)")
24                                .font(.footnote)
25                                .foregroundColor(.white)
26                                .fontWeight(.bold)
27                                .offset(y:30)
28                        }
29                        RuleMark(y: .value("mean", mean))
30                            .foregroundStyle(Colors.lineColor)
31                            .annotation(position: .overlay,
32                                        alignment: .bottomTrailing,
33                                        spacing: 5) {
34                                VStack {
35                                    Text("mean")
36                                    Text("\(String(format: "%.1f", mean))")
37                                }
38                                .foregroundColor(Colors.lineColor)
39                            }
40                    }
41                    .chartYAxis {
42                        AxisMarks(position: .leading)
43                    }
44                    .chartLegend(.hidden)
45                    .padding()
46                    .chartYScale(domain: 40...48)
47                }
48                .groupBoxStyle(YellowGroupBoxStyle())
49                .frame(height: 400)
50                Spacer()
51            }
52        }
53    }
54}

Line chart might be more appropriate than showing the top of bar chart

Line chart might be more appropriate than showing the top of bar chart

Conclusion

Bar charts are used to present categories of data as rectangular bars with the heights or widths proportional to the values they represent. When a data set contains data with very slight differences, it is possible to zoom in on the top section of tha bar chart with Swift Charts. The mechanism to do this is to use yStart and yEnd values for each BarMark as well as setting the y-axis scale with chartYScale.

However, just because it is possible, does not mean it should be done, as the resulting bar chart might be misleading. The size of the bar is no longer proportional to the value it represents. It may be better to use a line chart to zoom in on differences between different categories.

The code for BarChartSection View is available on GitHub.

Visualise the Matthew Effect with Swift Charts

Eric Callanan — Sunday, 16 Oct 2022

I came across the Matthew effect recently, which struck me as very unfair so I wondered if I could reproduce the results demonstrated. This article outlines the Swift code for an app to test the redistribution of coins in a closed population based on random coin tosses between agents in the population.

SwiftUI Charts, introduced in iOS 16, is used to display the distribution of coins in the population. A number of scenarios are investigated to determine the outcome.

Matthew effect

The Matthew effect can be summarised by the adage "the rich get richer and the poor get poorer". The term was coined by sociologists Robert K. Merton and Harriet Zuckerman in 1968 and takes its name from the parable of the talents or minas in the biblical Gospel of Matthew.

For unto every one that hath shall be given, and he shall have abundance: but from him, that hath not shall be taken away even that which he hath. And cast ye the unprofitable servant into outer darkness: there shall be weeping and gnashing of teeth.
[Matthew 25:24–30]

Pareto distribution

The Pareto distribution or "80-20 rule", originally used to describe the distribution of wealth in a society states that 80% of the wealth is held by 20% of the population. this has been extended to many other observations stating that 80% of the outcomes are due to 20% of the causes

The experiment is based on Computer Animation of Money Exchange Models, which has an animated video on youtube at Pareto Distribution and Price's Law. The original paper is Statistical mechanics of money, which goes into way too much details on the analysis. There is a lot of discussion on this paper of being a closed system and only showing the money transfer and not representing the value of any potential property that may be transferred, if this was a real-world scenario. It does seem odd to me to just ignore transaction when the loser does not have sufficient funds to cover the transfer.

Four scenarios are considered:

Transfer of a random number of coins if possible (ignore if insufficient coins)
Transfer of a single coin if possible (ignore if insufficient coins)
Allow agents to have a negative number of coins (debt)
Remove agents with zero coins from the game

Transaction or exchange:

I believe in the original paper that a single transaction is the transfer of a specified amount of coins from one agent to another within the population. The app here started out with this, but it was taking too long to get anywhere, especially when the system was set up to start with 1,000 or 50,000 agents. An alternative approach is to play the simulation in rounds, whereby every agent in the population takes part in an exchange. There is also an issue with this approach where all the agents coin number will switch from even numbers to odd numbers in the population until some agents run out of coins and some of the exchanges fail. So the compromise used in these simulations is to select a random number of the population to exchange coins at each iteration of the game. This allows the simulations to proceed rapidly without the odd/even bars being displayed. The individual transaction count is displayed in the app and the failed transactions are counted as well just for interest.

Set up Model and ViewModel

Swift Charts are used to visualise the changes over time as the exchanges progress. A number of structures are defined for Agent and Coin so that collections of these can be used in the Simulation. The model is based on Computer Animation of Money Exchange Models which will hold a collection of agents, each starting with a set amount of coins. The model will allow transactions to take place to exchange a random or fixed amount of coins between two agents, also chosen at random.

1struct Agent: Identifiable {
2    let id: Int
3    var total: Int
4}
5
6struct Coin: Identifiable {
7    let id: Int
8    var coinCount: Int
9}

Model

 1struct MatthewModel {
 2    private(set) var agents: [Int: Agent]
 3    private(set) var transactionCount: Int
 4    private(set) var successfulTransactionCount: Int
 5    private(set) var allowNegative: Bool
 6    private(set) var allowAgentsWithZero: Bool
 7
 8    init(capacity: Int) {
 9        self.init(capacity: capacity, allowNegativeCount: false, allowAgentsWithZero: true)
10    }
11
12    init(capacity: Int, allowNegativeCount: Bool, allowAgentsWithZero: Bool) {
13        self.agents = [:]
14        for identity in 1...capacity {
15            self.agents[identity] = Agent(id: identity, total: Config.totalCoin)
16        }
17        self.transactionCount = 0
18        self.successfulTransactionCount = 0
19        self.allowNegative = allowNegativeCount
20        self.allowAgentsWithZero = allowAgentsWithZero
21    }
22
23    mutating func exchangeCoins(from: Int, to: Int, amount: Int) {
24        self.transactionCount += 1
25        if self.allowNegative || agents[from]!.total >= amount {
26            self.successfulTransactionCount += 1
27            agents[from]!.total = agents[from]!.total - amount
28            agents[to]!.total = agents[to]!.total + amount
29        }
30    }
31    
32    mutating func performTransaction(amount: Int? = nil) async {
33        let remainingIndexes = self.allowAgentsWithZero ? agents.map {$0.key} : agents.filter{ $0.value.total > 0 }.map { $0.key }
34
35        if remainingIndexes.count > 1 {
36            // pick a random two agents in the game
37            let first = remainingIndexes.randomElement()!
38            var second = remainingIndexes.randomElement()!
39            while second == first {
40                second = remainingIndexes.randomElement()!
41            }
42            
43            exchangeCoins(from: first,
44                          to: second,
45                          amount: (amount == nil) ? Int.random(in: 1...Config.totalCoin) : amount!)
46        }
47    }
48    
49    mutating func performTransactionSuite(amount: Int? = nil) async {
50        var remainingIndexes = self.allowAgentsWithZero ? agents.map {$0.key} : agents.filter{ $0.value.total > 0 }.map {$0.key}
51
52        if remainingIndexes.count > 1 {
53            remainingIndexes.shuffle()
54            
55            let randomSample = Int.random(in: 1...remainingIndexes.count)
56            while remainingIndexes.count > randomSample {
57                let first = remainingIndexes.removeLast()
58                let second = remainingIndexes.removeLast()
59                exchangeCoins(from: first,
60                              to: second,
61                              amount: (amount == nil) ? Int.random(in: 1...Config.totalCoin) : amount!)
62            }
63        }
64    }
65}

ViewModel

 1struct Config {
 2    static let playerNumber = 1000
 3    static let totalCoin = 10
 4}
 5
 6
 7class MatthewViewModel: ObservableObject {
 8    @Published private(set) var game: MatthewModel
 9    @Published private(set) var isRunning: Bool
10
11    private(set) var allowNegative: Bool
12    private(set) var allowAgentsWithZero: Bool
13
14    init(allowNegativeCount: Bool = false, allowAgentsWithZero: Bool = true) {
15        self.allowNegative = allowNegativeCount
16        self.allowAgentsWithZero = allowAgentsWithZero
17        self.game = MatthewModel(capacity: Config.playerNumber,
18                                 allowNegativeCount: self.allowNegative,
19                                 allowAgentsWithZero: self.allowAgentsWithZero)
20        self.isRunning = false
21    }
22    
23    var coinStatus: [Coin] {
24        var sum: [Coin] = []
25        for index in 0...(Config.totalCoin * 7) {
26            sum.append(Coin(id: index,
27                            coinCount: game.agents.filter{ $0.value.total == index }.count))
28        }
29
30        return sum
31    }
32    
33    var coinStatusNeg: [Coin] {
34        var sum: [Coin] = []
35        for index in ((Config.totalCoin + 1) * (-7))...((Config.totalCoin + 1) * 7) {
36            sum.append(Coin(id: index,
37                            coinCount: game.agents.filter{ $0.value.total == index }.count))
38        }
39
40        return sum
41    }
42    
43    var maxAgentsWithSameCoinCount: Int {
44        let coins = self.coinStatus.map { $0.coinCount }
45        return coins.max() ?? 0
46    }
47    
48    var transactionsCount: Int {
49        return game.transactionCount
50    }
51    
52    var failedTransactionsCount: Int {
53        return game.transactionCount - game.successfulTransactionCount
54    }
55    
56    var agentsWithZero: Int {
57        return game.agents.filter{ $0.value.total == 0 }.count
58    }
59    
60    @MainActor
61    func performRandomTransactions(number: Int, amount: Int? = nil) async {
62        self.isRunning = true
63        for _ in 1...number {
64            // await game.performTransaction(amount: amount)
65            await game.performTransactionSuite(amount: amount)
66        }
67        self.isRunning = false
68    }
69    
70    func restart() {
71        self.game = MatthewModel(capacity: Config.playerNumber,
72                                 allowNegativeCount: self.allowNegative,
73                                 allowAgentsWithZero: self.allowAgentsWithZero)
74    }
75}

Display Coin Distribution using Swift Charts

A chart is used in the view to display the Coin distribution in the population in a bar chart and the view is bound to the model, so that changes are automatically reflected in the chart. The first scenario is to consider a population of 500 agents, each of which start with 10 coins each. Two agents are picked at random and a coin toss is simulated, whereby one agent wins and the other looses. The loser transfers a random number of coins (between 1 and 10) to the winner. If the loser has insufficient coins to fulfil the transfer amount, then no exchange takes place.

Scenario 1: Transfer random amount:

All agents start with the same number of coins

Each transaction involves 2 agents of the population at random

The number of coins to transfer is a random number between 1 and the average number of coins per user

If the loser does not have the required number of coins – then no transfer takes place

This distribution quickly drifts to a skewed distribution and eventually reaches a steady state demonstrating Pareto distribution or Price’s law.

 1struct ScenarioOneView: View {
 2    @ObservedObject var mathewGame = MatthewViewModel()
 3    
 4    var body: some View {
 5        ZStack {
 6            Color(hue: 0.58, saturation: 0.07, brightness: 1.0)
 7                    .edgesIgnoringSafeArea(.all)
 8            
 9            VStack {
10                CoinBarChartView(mathewGame: mathewGame,
11                                 chartTitle: "1: Exchange of random amounts")
12                
13                SettingsView(transferAmount: "random 1 to \(Config.totalCoin)",
14                             allowPlayWithZero: mathewGame.allowAgentsWithZero,
15                             allowNegative: mathewGame.allowNegative)
16
17                RunTransactionsView(mathewGame: mathewGame,
18                                    numOfTransactions: 10)
19
20                Spacer()
21            }
22        }
23    }
24}

 1struct CoinBarChartView: View {
 2    @ObservedObject var mathewGame: MatthewViewModel
 3    var chartTitle: String
 4    var displayNegative = false
 5    var displayFailedTransactionCount = true
 6    
 7    @State var isChartVisible = true
 8    
 9    var body: some View {
10        VStack {
11            GroupBox(chartTitle) {
12                if self.isChartVisible {
13                    BarChart(yMax: mathewGame.maxAgentsWithSameCoinCount)
14                } else {
15                    Colors.bgGradient
16                        .overlay(Text("Chart hidden"))
17                }
18            }
19            .groupBoxStyle(YellowGroupBoxStyle())
20            .padding()
21            .frame(height: 400)
22            
23            VStack {
24                HStack {
25                    Text("Numer of Transactions = ").frame(width: 250, alignment: .trailing)
26                    Text("\(mathewGame.transactionsCount)")
27                    Spacer()
28                }
29                if displayFailedTransactionCount {
30                    HStack {
31                        Text("Failed Transactions = ").frame(width: 250, alignment: .trailing)
32                        Text("\(mathewGame.failedTransactionsCount)")
33                        Spacer()
34                    }
35                } else {
36                    HStack {
37                        Text("Agents with Zero coins = ").frame(width: 250, alignment: .trailing)
38                        Text("\(mathewGame.agentsWithZero)")
39                        Spacer()
40                    }
41                }
42            }
43            
44            Button("\(self.isChartVisible ? "Hide Chart" : "Show Chart")") {
45                self.isChartVisible.toggle()
46            }
47            .buttonStyle(ActionButtonStyle())
48        }
49    }
50    
51    @ViewBuilder
52    func BarChart(yMax: Int) -> some View {
53        Chart(self.displayNegative ? mathewGame.coinStatusNeg : mathewGame.coinStatus) {
54            BarMark(
55                x: .value("number", $0.id),
56                y: .value("count", $0.coinCount),
57                width: 7
58            )
59            .foregroundStyle(Colors.barColor)
60        }
61        .chartPlotStyle { plotArea in
62            plotArea
63                .background(Colors.bgPlotColor)
64        }
65        .chartYAxis() {
66            AxisMarks(position: .leading)
67        }
68    }
69}

 1struct SettingsView: View {
 2    var transferAmount: String
 3    var allowPlayWithZero: Bool = true
 4    var allowNegative: Bool = false
 5    
 6    var body: some View {
 7        VStack(spacing: 5) {
 8            Text("Scenario Settings")
 9                .font(.custom("Helvetica Neue", size: 22, relativeTo: .largeTitle))
10            .fontWeight(.bold)
11            
12            Grid() {
13                GridRow {
14                    Text("Number of Agents:")
15                        .frame(width: 250, alignment: .trailing)
16                        .gridColumnAlignment(.trailing)
17                    
18                    Text("\(Config.playerNumber)")
19                        .gridColumnAlignment(.leading)
20                }
21                GridRow {
22                    Text("Number of Coins:")
23                    Text("\(Config.totalCoin)")
24                }
25                GridRow {
26                    Text("Transfer amount:")
27                    Text(transferAmount)
28                }
29                GridRow {
30                    Text("Allow play with zero coin:")
31                    Text("\(allowPlayWithZero ? "Yes" : "No")")
32                }
33                GridRow {
34                    Text("Negative coin count allowed:")
35                    Text("\(allowNegative ? "Yes" : "No")")
36                }
37            }
38        }
39        .padding()
40    }
41}

 1struct RunTransactionsView: View {
 2    @ObservedObject var mathewGame: MatthewViewModel
 3    @State var numOfTransactions: Int
 4    var transferAmount: Int? = nil
 5    
 6    let repeatOptions = [10, 100, 500, 5000, 10000]
 7    
 8    var body: some View {
 9        VStack {
10            VStack {
11                Text("Number of Transactions")
12                    .font(.custom("Helvetica Neue", size: 22, relativeTo: .largeTitle))
13                    .fontWeight(.bold)
14                Picker("", selection: $numOfTransactions) {
15                    ForEach(repeatOptions, id: \.self) {
16                        Text("\($0)")
17                            .fontWeight(.heavy)
18                    }
19                }
20                .pickerStyle(.segmented)
21                .background(Color(hue: 0.10, saturation: 0.10, brightness: 0.98))
22            }
23            .padding(.horizontal, 35)
24            
25            
26            Button("Perform Transactions") {
27                Task {
28                    await mathewGame.performRandomTransactions(number: numOfTransactions,
29                    amount: transferAmount)
30                }
31            }
32            .buttonStyle(ActionButtonStyle())
33            .disabled(mathewGame.isRunning)
34            
35            Spacer().frame(height: 20)
36            
37            Button("Reset") {
38                mathewGame.restart()
39            }
40            .buttonStyle(ActionButtonStyle())
41            .disabled(mathewGame.isRunning)
42        }
43    }
44}

Colors and styles used in the App.

 1struct YellowGroupBoxStyle: GroupBoxStyle {
 2    func makeBody(configuration: Configuration) -> some View {
 3        configuration.content
 4            .padding(.top, 20)
 5            .padding(20)
 6            .background(Colors.bgGradient)
 7            .cornerRadius(20)
 8            .overlay(
 9                configuration.label.padding(10),
10                alignment: .top
11            )
12    }
13}
14
15struct ActionButtonStyle: ButtonStyle {
16    @Environment(\.isEnabled) var isEnabled
17    
18    func makeBody(configuration: Configuration) -> some View {
19        configuration.label
20            .font(.system(size: 20, weight: .bold, design: .rounded))
21            .frame(height:30)
22            .padding(.horizontal, 20)
23            .foregroundColor(.white)
24            .padding(5)
25            .background(isEnabled ? Colors.buttonGradient :  Colors.disabledbuttonGradient)
26            .cornerRadius(25)
27            .shadow(color: isEnabled ? .gray : .clear, radius:5, x:3.0, y:3.0)
28            .scaleEffect(configuration.isPressed ? 0.95 : 1.0)
29    }
30}
31
32struct Colors {
33    static let barColor = Color(hue: 0.8, saturation: 0.7, brightness: 0.5)
34    static let bgPlotColor = Color(hue: 0.12, saturation: 0.10, brightness: 0.92)
35
36    static let bgGradient = LinearGradient(
37        gradient: Gradient(colors: [
38            Color(hue: 0.10, saturation: 0.10, brightness: 1.0),
39            Color(hue: 0.10, saturation: 0.20, brightness: 0.95)
40        ]),
41        startPoint: .topLeading,
42        endPoint: .bottomTrailing)
43    
44    static let buttonGradient1 = LinearGradient(
45        gradient: Gradient(colors: [
46            Color(hue: 0.95, saturation: 0.7, brightness: 0.9),
47            Color(hue: 0.0, saturation: 0.8, brightness: 0.93)
48        ]),
49        startPoint: .top,
50        endPoint: .bottom)
51    
52    static let buttonGradient = LinearGradient(
53        gradient: Gradient(colors: [
54            Color(hue: 0.75, saturation: 0.8, brightness: 0.8),
55            Color(hue: 0.75, saturation: 0.8, brightness: 0.5),
56            Color(hue: 0.75, saturation: 0.8, brightness: 0.4)
57        ]),
58        startPoint: .top,
59        endPoint: .bottom)
60    
61    static let disabledbuttonGradient = LinearGradient(
62        gradient: Gradient(colors: [
63            Color(.gray),
64            Color(.black).opacity(0.5)]),
65        startPoint: .top,
66        endPoint: .bottom)
67}

Random number of coins transferred between two agents repeatedly in a population of 500 agents

Random number of coins transferred between two agents repeatedly in a population of 500 agents

Scenario 1: Agents transfer random number of coins when possible

Scenario 1: Agents transfer random number of coins when possible

Fixed coin transfer at 1 coin

Scenario 2: Transfer of a single coin:

All agents start with the same number of coins

Each transaction involves 2 agents of the population at random

The number of coins to transfer is fixed at 1

If the loser does not have the required number of coins – then no transfer takes place

This starts initially to normalise and then drifts to a skewed distribution and eventually reaches a steady state demonstrating Pareto distribution or Price’s law.

 1struct ScenarioTwoView: View {
 2    @ObservedObject var mathewGame = MatthewViewModel()
 3    
 4    var body: some View {
 5        ZStack {
 6            Color(hue: 0.58, saturation: 0.07, brightness: 1.0)
 7                    .edgesIgnoringSafeArea(.all)
 8            
 9            VStack {
10                Spacer().frame(height: 50)
11                CoinBarChartView(mathewGame: mathewGame,
12                                 chartTitle: "2: Exchange of 1 coin")
13                
14                SettingsView(transferAmount: "1",
15                             allowPlayWithZero: mathewGame.allowAgentsWithZero,
16                             allowNegative: mathewGame.allowNegative)
17
18
19                RunTransactionsView(mathewGame: mathewGame,
20                                    numOfTransactions: 10,
21                                    transferAmount: 1)
22
23                Spacer()
24            }
25        }
26    }
27}

Scenario 2: Agents transfer 1 coin at a time in a population of 100 agents showing changes over time

Scenario 2: Agents transfer 1 coin at a time in a population of 100 agents showing changes over time

Allow negative coin count

It seems odd to ignore transactions where the losing agent has insufficient coins to transfer. One option is to allow the transaction to take place and allow agents to go into debt. This scenario examines the outcome if this was allowed.

Scenario 3: Allow negative coin count:

All agents start with the same number of coins

Each transaction involves 2 agents of the population at random

The number of coins to transfer is fixed at 1

Coin transfer always takes place and agents may go into negative coin count

The distribution in this scenario seems to exhibit a normal distribution with an average around the initial average value. The curve seems to flatten over time with extremes in the positive and negative directions.

 1struct ScenarioThreeView: View {
 2    @ObservedObject var mathewGame = MatthewViewModel(allowNegativeCount: true)
 3    
 4    var body: some View {
 5        ZStack {
 6            Color(hue: 0.58, saturation: 0.07, brightness: 1.0)
 7                    .edgesIgnoringSafeArea(.all)
 8            
 9            VStack {
10                Spacer().frame(height: 50)
11
12                CoinBarChartView(mathewGame: mathewGame,
13                                 chartTitle: "3: Allow negative coin count",
14                                 displayNegative: true)
15
16                SettingsView(transferAmount: "1",
17                             allowPlayWithZero: mathewGame.allowAgentsWithZero,
18                             allowNegative: mathewGame.allowNegative)
19
20
21                RunTransactionsView(mathewGame: mathewGame,
22                                    numOfTransactions: 10,
23                                    transferAmount: 1)
24                
25                Spacer()
26            }
27        }
28    }
29}

Scenario 3: Agents transfer 1 coin and are allowed to go into negative coin count

Scenario 3: Agents transfer 1 coin and are allowed to go into negative coin count

Remove Agents with zero coins

The final scenario is where agents are excluded from playing once they have zero coins remaining. I find this scenario fascinating as it demonstrates the Matthew Effect, where one agent will end up with all the coins.

Scenario 4: Remove agents with zero coin:

All agents start with the same number of coins

Each transaction involves 2 random agents of the population with coin count greater than 0

The number of coins to transfer is fixed at 1

Coin transfer always takes place as both agents have at least 1 coin at the time of the transaction

 1struct ScenarioFourView: View {
 2    @ObservedObject var mathewGame = MatthewViewModel(allowAgentsWithZero: false)
 3    
 4    var body: some View {
 5        ZStack {
 6            Color(hue: 0.58, saturation: 0.07, brightness: 1.0)
 7                    .edgesIgnoringSafeArea(.all)
 8            
 9            VStack {
10                Spacer().frame(height: 50)
11
12                CoinBarChartView(mathewGame: mathewGame,
13                                 chartTitle: "4: Agents with zero coin are out",
14                                 displayFailedTransactionCount: false)
15                
16                SettingsView(transferAmount: "1",
17                             allowPlayWithZero: mathewGame.allowAgentsWithZero,
18                             allowNegative: mathewGame.allowNegative)
19
20                RunTransactionsView(mathewGame: mathewGame,
21                                    numOfTransactions: 10,
22                                    transferAmount: 1)
23                
24                Spacer()
25            }
26        }
27    }
28}

Scenario 4: Agents with zero coins are out in a population of 100 agents showing changes over time

Scenario 4: Agents with zero coins are out in a population of 100 agents showing changes over time

Scenario 4: Agents with zero coins are out in a population of 500 agents

Scenario 4: Agents with zero coins are out in a population of 500 agents

Matthews Effect

Removing players with zero coins from the game demonstrates the Matthew effect. Change the settings to have 10 agents with 10 coins each. Selecting 2 agents at ramdom and transferring a single coin at random results in an initial Pareto distribution and eventually with one agent getting all the coins as the other 9 agents are eliminated. This works with any numbers for coins and agents, but obviously takes more time and transactions for larger numbers.

The Matthews effect shown where one agent gets all the coins when agents with zero are eliminated

The Matthews effect shown where one agent gets all the coins when agents with zero are eliminated

Conclusion

The transactions of the coin exchange is conducted with an asynchronous task and the Swift Chart is bound to the model to display the coin distribution as the data changes. I found that the speed of the exchange simulation could be increased by hiding the chart, so the refreshing of the chart does seem to slow down the app performance.

I was not quite able to reproduce the values in the charts as shown on Computer Animation of Money Exchange Models, never the less, I was able to produce the over all effect.

When agents with zero coins remaining are allowed to continue to play the game, the game enters a steady state with the coins distributed in a Pareto distribution.
If agents are allowed to go into negative coin equity, then the distribution seems to remain normal centered around the starting average coin value.
Finally, if players are removed from the game when their coin count reaches zero, then this illustrates the Matthew effect with 1 player ultimately getting all the coins.

The code for MathewEffectApp is available on GitHub.

Create a bar chart with SwiftUI Charts in iOS 16

Eric Callanan — Sunday, 11 Sep 2022

At WWWDC 2022, Apple introduced SwiftUI Charts, which makes it easy to create various charts within SwiftUI views. This article demonstrates how to quickly create a bar chart and customise the chart containing multiple sets of data.

Previous articles on Swift Charts:

Create a line chart with SwiftUI Charts in iOS 16

Customise a line chart with SwiftUI Charts in iOS 16

Default bar chart

Start with the default bar chart created with SwiftUI Charts similar to the line chart created in a Simple line chart. The bar chart shows Step count data for each day of the week for a week in July with the height of the each bar proportional to the number of steps taken.

 1struct TestView1: View {    
 2    let currentWeek: [StepCount] = [
 3        StepCount(day: "20220717", steps: 4200),
 4        StepCount(day: "20220718", steps: 15000),
 5        StepCount(day: "20220719", steps: 2800),
 6        StepCount(day: "20220720", steps: 10800),
 7        StepCount(day: "20220721", steps: 5300),
 8        StepCount(day: "20220722", steps: 10400),
 9        StepCount(day: "20220723", steps: 4000)
10    ]
11    
12    var body: some View {
13        VStack {
14            GroupBox ( "Bar Chart - Step Count") {
15                Chart(currentWeek) {
16                    BarMark(
17                        x: .value("Week Day", $0.weekday, unit: .day),
18                        y: .value("Step Count", $0.steps)
19                    )
20                }
21            }
22            .frame(height: 500)
23            
24            Spacer()
25        }
26        .padding()
27    }
28}

A StepCount structure is defined that conforms to Identifiable and holds the date and the number of steps.

 1struct StepCount: Identifiable {
 2    let id = UUID()
 3    let weekday: Date
 4    let steps: Int
 5    
 6    init(day: String, steps: Int) {
 7        let formatter = DateFormatter()
 8        formatter.dateFormat = "yyyyMMdd"
 9        
10        self.weekday = formatter.date(from: day) ?? Date.distantPast
11        self.steps = steps
12    }
13    
14    var weekdayString: String {
15        let dateFormatter = DateFormatter()
16        dateFormatter.dateFormat = "yyyyMMdd"
17        dateFormatter.dateStyle = .long
18        dateFormatter.timeStyle = .none
19        dateFormatter.locale = Locale(identifier: "en_US")
20        return  dateFormatter.string(from: weekday)
21    }
22}

Bar chart showing daily step count with SwiftUI Charts in iOS 16

Bar chart showing daily step count with SwiftUI Charts in iOS 16

Customise bars and axes

The default chart can be customised in similar ways to Customise a line chart. Here the y-axis is moved to the leading position and the labels on the x-axis are centered and configured to just display the weekday.

 1struct TestView3: View {
 2    let currentWeek: [StepCount] = [
 3        StepCount(day: "20220717", steps: 4200),
 4        StepCount(day: "20220718", steps: 15000),
 5        StepCount(day: "20220719", steps: 2800),
 6        StepCount(day: "20220720", steps: 10800),
 7        StepCount(day: "20220721", steps: 5300),
 8        StepCount(day: "20220722", steps: 10400),
 9        StepCount(day: "20220723", steps: 4000)
10    ]
11    
12    var body: some View {
13        VStack {
14            GroupBox ( "Bar Chart - Step Count") {
15                Chart(currentWeek) {
16                    BarMark(
17                        x: .value("Week Day", $0.weekday, unit: .day),
18                        y: .value("Step Count", $0.steps)
19                    )
20                    .foregroundStyle(Color.orange)
21                }
22                .chartYAxis {
23                    AxisMarks(position: .leading)
24                }
25                .chartXAxis {
26                    AxisMarks (values: .stride (by: .day)) { value in
27                        AxisGridLine().foregroundStyle(.orange)
28                        AxisValueLabel(format: .dateTime.weekday(),
29                                       centered: true)
30                    }
31                }
32            }
33            .frame(height: 500)
34            
35            Spacer()
36        }
37        .padding()
38    }
39}

Bar chart with orange color bars and weekdays on x-axis with SwiftUI Charts in iOS 16

Bar chart with orange color bars and weekdays on x-axis with SwiftUI Charts in iOS 16

Label the bars

Another way to simplify a bar chart like this is to remove the y-axis and x-axis gridlines and place the value for each bar on the bars themselves. The bars are too narrow to contain the full values of the step count, so the number of steps are displayed in thousands.

 1struct TestView4: View {
 2    let currentWeek: [StepCount] = [
 3        StepCount(day: "20220717", steps: 4200),
 4        StepCount(day: "20220718", steps: 15000),
 5        StepCount(day: "20220719", steps: 2800),
 6        StepCount(day: "20220720", steps: 10800),
 7        StepCount(day: "20220721", steps: 5300),
 8        StepCount(day: "20220722", steps: 10400),
 9        StepCount(day: "20220723", steps: 4000)
10    ]
11    
12    var body: some View {
13        VStack {
14            GroupBox ( "Bar Chart - Step Count (x 1,000)") {
15                Chart(currentWeek) {
16                    let stepThousands = Double($0.steps) / 1000.00
17                    BarMark(
18                        x: .value("Week Day", $0.weekday, unit: .day),
19                        y: .value("Step Count", $0.steps)
20                    )
21                    .foregroundStyle(Color.orange)
22                    .annotation(position: .overlay, alignment: .topLeading, spacing: 3) {
23                        Text("\(stepThousands, specifier: "%.1F")")
24                            .font(.footnote)
25                            .foregroundColor(.white)
26                    }
27                }
28                .chartYAxis(.hidden)
29                .chartXAxis {
30                    AxisMarks (values: .stride (by: .day)) { value in
31                        AxisValueLabel(format: .dateTime.weekday(),
32                                       centered: true)
33                    }
34                }
35            }
36            .frame(height: 500)
37            
38            Spacer()
39        }
40        .padding()
41    }
42}

Bar chart with hidden gridlines and axis with SwiftUI Charts in iOS 16

Bar chart with hidden gridlines and axis with SwiftUI Charts in iOS 16

Make horizontal Bar Chart

The labels on the bars are a little tight. There is more room for the labels if we switch the Bar Chart to display the bars horizontally. This is easily done switching the x and y values for each BarMark.

 1struct TestView5: View {
 2    let currentWeek: [StepCount] = [
 3        StepCount(day: "20220717", steps: 4200),
 4        StepCount(day: "20220718", steps: 15000),
 5        StepCount(day: "20220719", steps: 2800),
 6        StepCount(day: "20220720", steps: 10800),
 7        StepCount(day: "20220721", steps: 5300),
 8        StepCount(day: "20220722", steps: 10400),
 9        StepCount(day: "20220723", steps: 4000)
10    ]
11    
12    var body: some View {
13        VStack {
14            GroupBox ( "Bar Chart - Step Count") {
15                Chart(currentWeek) {
16                    let steps = $0.steps
17                    BarMark(
18                        x: .value("Step Count", $0.steps),
19                        y: .value("Week Day", $0.weekday, unit: .day)
20                    )
21                    .foregroundStyle(Color.orange)
22                    .annotation(position: .overlay, alignment: .trailing, spacing: 5) {
23                        Text("\(steps)")
24                            .font(.footnote)
25                            .foregroundColor(.white)
26                            .fontWeight(.bold)
27                    }
28                }
29                .chartXAxis(.hidden)
30                .chartYAxis {
31                    AxisMarks (position: .leading, values: .stride (by: .day)) { value in
32                        AxisValueLabel(format: .dateTime.weekday(),
33                                       centered: true)
34                    }
35                }
36            }
37            .frame(height: 500)
38            
39            Spacer()
40        }
41        .padding()
42    }
43}

Bar chart with hidden gridlines and horizontal bars with SwiftUI Charts in iOS 16

Bar chart with hidden gridlines and horizontal bars with SwiftUI Charts in iOS 16

Add second set of data to Bar Chart

A second set of data is added to the bar chart. Unfortunately, by default, the two sets of data values are displayed on top of each other as a stacked bar chart.

 1struct TestView6: View {
 2    var body: some View {
 3        let currentWeek: [StepCount] = [
 4            StepCount(day: "20220717", steps: 4200),
 5            StepCount(day: "20220718", steps: 15000),
 6            StepCount(day: "20220719", steps: 2800),
 7            StepCount(day: "20220720", steps: 10800),
 8            StepCount(day: "20220721", steps: 5300),
 9            StepCount(day: "20220722", steps: 10400),
10            StepCount(day: "20220723", steps: 4000)
11        ]
12        
13        let previousWeek: [StepCount] = [
14            StepCount(day: "20220710", steps: 15800),
15            StepCount(day: "20220711", steps: 7300),
16            StepCount(day: "20220712", steps: 8200),
17            StepCount(day: "20220713", steps: 25600),
18            StepCount(day: "20220714", steps: 16100),
19            StepCount(day: "20220715", steps: 16500),
20            StepCount(day: "20220716", steps: 3200)
21        ]
22        
23        let stepData = [
24            (period: "Previous Week", data: previousWeek),
25            (period: "Current Week", data: currentWeek)
26        ]
27
28        VStack {
29            GroupBox ( "Bar Chart - Step Count") {
30                Chart(stepData, id: \.period) { steps in
31                    ForEach(steps.data) {
32                        BarMark(
33                            x: .value("Week Day", $0.shortDay),
34                            y: .value("Step Count", $0.steps)
35                        )
36                        .foregroundStyle(by: .value("Week", steps.period))
37                    }
38                }
39                .chartYAxis {
40                    AxisMarks(position: .leading)
41                }
42            }
43            .frame(height: 500)
44            
45            Spacer()
46        }
47        .padding()
48    }
49}

Bar chart with multiple sets of data with SwiftUI Charts in iOS 16

Bar chart with multiple sets of data with SwiftUI Charts in iOS 16

Side-by-side Bars

The position function is used to position the bars along the x-axis according to their time period. Now the bars for the current week and the previous week are displayed side-by-side, making it easy to compare the two sets of results.

 1struct TestView7: View {
 2    var body: some View {
 3        let previousWeek: [StepCount] = [
 4            StepCount(day: "20220710", steps: 15800),
 5            StepCount(day: "20220711", steps: 7300),
 6            StepCount(day: "20220712", steps: 8200),
 7            StepCount(day: "20220713", steps: 25600),
 8            StepCount(day: "20220714", steps: 16100),
 9            StepCount(day: "20220715", steps: 16500),
10            StepCount(day: "20220716", steps: 3200)
11        ]
12        
13        let currentWeek: [StepCount] = [
14            StepCount(day: "20220717", steps: 4200),
15            StepCount(day: "20220718", steps: 15000),
16            StepCount(day: "20220719", steps: 2800),
17            StepCount(day: "20220720", steps: 10800),
18            StepCount(day: "20220721", steps: 5300),
19            StepCount(day: "20220722", steps: 10400),
20            StepCount(day: "20220723", steps: 4000)
21        ]
22        
23        let stepData = [
24            (period: "Previous Week", data: previousWeek),
25            (period: "Current Week", data: currentWeek)
26        ]
27
28        VStack {
29            GroupBox ( "Daily Step Count for two weeks") {
30                Chart(stepData, id: \.period) { steps in
31                    ForEach(steps.data) {
32                        BarMark(
33                            x: .value("Week Day", $0.shortDay),
34                            y: .value("Step Count", $0.steps)
35                        )
36                        .foregroundStyle(by: .value("Week", steps.period))
37                        .position(by: .value("week", steps.period))
38                    }
39                }
40                .chartYAxis {
41                    AxisMarks(position: .leading)
42                }
43                .chartForegroundStyleScale([
44                    "Previous Week" : Color(hue: 0.10, saturation: 0.70, brightness: 0.90),
45                    "Current Week": Color(hue: 0.80, saturation: 0.70, brightness: 0.80)
46                ])
47            }
48            .frame(height: 500)
49            .groupBoxStyle(YellowGroupBoxStyle())
50            
51            Spacer()
52        }
53        .padding()
54    }
55}

Bar chart with side-by-side bars with SwiftUI Charts in iOS 16

Bar chart with side-by-side bars with SwiftUI Charts in iOS 16

Conclusion

SwiftUI Charts is a quick and easy way to add charts to a SwiftUI view. This article showed how to display a bar chart from the default chart to a more customised bar chart with multiple sets of data. The code for Bar Chart is available on GitHub.

Customise a line chart with SwiftUI Charts in iOS 16

Eric Callanan — Sunday, 14 Aug 2022

SwiftUI Charts introduced in iOS 16, can present data in an intuitive visual format and can be created quickly using SwiftUI Charts. This article demonstrates a couple of ways to customise a line chart and combine with an area chart to present data.

Default line chart

Start with the default line chart created with SwiftUI Charts in Create a line chart with SwiftUI Charts in iOS 16. This shows Step count data for two different weeks comparing steps taken on each weekday.

 1struct ChartView1: View {
 2    var body: some View {
 3        VStack {
 4            GroupBox ( "Line Chart - Daily Step Count") {
 5                Chart {
 6                    ForEach(stepData, id: \.period) { steps in
 7                        ForEach(steps.data) {
 8                            LineMark(
 9                                x: .value("Week Day", $0.shortDay),
10                                y: .value("Step Count", $0.steps)
11                            )
12                            .foregroundStyle(by: .value("Week", steps.period))
13                            .accessibilityLabel("\($0.weekdayString)")
14                            .accessibilityValue("\($0.steps) Steps")
15                        }
16                    }
17                }
18                .frame(height:400)
19            }
20            .padding()
21            
22            Spacer()
23        }
24    }
25}

Default line chart using SwiftUI Charts

Default line chart using SwiftUI Charts

Change the background behind the chart

Technically, not related to Charts, but the GroupBox background can be set using a color or a GroupBoxStyle.

 1struct YellowGroupBoxStyle: GroupBoxStyle {
 2    func makeBody(configuration: Configuration) -> some View {
 3        configuration.content
 4            .padding(.top, 30)
 5            .padding(20)
 6            .background(Color(hue: 0.10, saturation: 0.10, brightness: 0.98))
 7            .cornerRadius(20)
 8            .overlay(
 9                configuration.label.padding(10),
10                alignment: .topLeading
11            )
12    }
13}

 1struct ChartView2: View {
 2    var body: some View {
 3        VStack {
 4            GroupBox ( "Line Chart - Daily Step Count") {
 5                Chart {
 6                    ForEach(stepData, id: \.period) { steps in
 7                        ForEach(steps.data) {
 8                            LineMark(
 9                                x: .value("Week Day", $0.shortDay),
10                                y: .value("Step Count", $0.steps)
11                            )
12                            .foregroundStyle(by: .value("Week", steps.period))
13                            .accessibilityLabel("\($0.weekdayString)")
14                            .accessibilityValue("\($0.steps) Steps")
15                        }
16                    }
17                }
18                .frame(height:400)
19            }
20            // Add a style to the GroupBox
21            .groupBoxStyle(YellowGroupBoxStyle())
22            .padding()
23            
24            Spacer()
25        }
26    }
27}

Set a style for the GroupBox background

Set a style for the GroupBox background

Set the plot or chart background

It is possible to set the background for the chart plot using chartPlotStyle or set a background for the entire chart using chartBackground.

Set the plot background

 1            GroupBox ( "Line Chart - Plot Background") {
 2                Chart {
 3                    ForEach(stepData, id: \.period) { steps in
 4                        ForEach(steps.data) {
 5                            LineMark(
 6                                x: .value("Week Day", $0.shortDay),
 7                                y: .value("Step Count", $0.steps)
 8                            )
 9                            .foregroundStyle(by: .value("Week", steps.period))
10                            .accessibilityLabel("\($0.weekdayString)")
11                            .accessibilityValue("\($0.steps) Steps")
12                        }
13                    }
14                }
15                .chartPlotStyle { plotArea in
16                    plotArea
17                        .background(.orange.opacity(0.1))
18                        .border(.orange, width: 2)
19                }
20                .frame(height:200)
21            }
22            .groupBoxStyle(YellowGroupBoxStyle())

Set the chart background

 1            GroupBox ( "Line Chart - Chart Background") {
 2                Chart {
 3                    ForEach(stepData, id: \.period) { steps in
 4                        ForEach(steps.data) {
 5                            LineMark(
 6                                x: .value("Week Day", $0.shortDay),
 7                                y: .value("Step Count", $0.steps)
 8                            )
 9                            .foregroundStyle(by: .value("Week", steps.period))
10                            .accessibilityLabel("\($0.weekdayString)")
11                            .accessibilityValue("\($0.steps) Steps")
12                        }
13                    }
14                }
15                .chartBackground { chartProxy in
16                    Color.red.opacity(0.1)
17                }
18                .frame(height:200)
19            }
20            .groupBoxStyle(YellowGroupBoxStyle())

Set both the plot and chart background

 1            GroupBox ( "Line Chart - Plot & Chart Backgroundt") {
 2                Chart {
 3                    ForEach(stepData, id: \.period) { steps in
 4                        ForEach(steps.data) {
 5                            LineMark(
 6                                x: .value("Week Day", $0.shortDay),
 7                                y: .value("Step Count", $0.steps)
 8                            )
 9                            .foregroundStyle(by: .value("Week", steps.period))
10                            .accessibilityLabel("\($0.weekdayString)")
11                            .accessibilityValue("\($0.steps) Steps")
12                        }
13                    }
14                }
15                .chartBackground { chartProxy in
16                    Color.red.opacity(0.1)
17                }
18                .chartPlotStyle { plotArea in
19                    plotArea
20                        .background(.orange.opacity(0.1))
21                        .border(.orange, width: 2)
22                }
23                
24                .frame(height:200)
25            }
26            .groupBoxStyle(YellowGroupBoxStyle())
27}

Set backgrounds on chart plot and on full chart using SwiftUI Charts

Set backgrounds on chart plot and on full chart using SwiftUI Charts

Move y-axis to leading edge

It is possible to hide the axes or reposition the axes, such as placing the y-axis on the leading edge of the plot. The y-axis is displayed by default on the trailing side of the chart. This can be placed on the leading side using the AxisMarks of chartYAxis. It is also possible to hide the axes completely by setting the visibility property to hidden.

 1struct ChartView4: View {
 2    var body: some View {
 3        VStack {
 4            GroupBox ( "Line Chart - Y-axis on leading edge") {
 5                Chart {
 6                    ForEach(stepData, id: \.period) { steps in
 7                        ForEach(steps.data) {
 8                            LineMark(
 9                                x: .value("Week Day", $0.shortDay),
10                                y: .value("Step Count", $0.steps)
11                            )
12                            .foregroundStyle(by: .value("Week", steps.period))
13                            .accessibilityLabel("\($0.weekdayString)")
14                            .accessibilityValue("\($0.steps) Steps")
15                        }
16                    }
17                }
18                .chartPlotStyle { plotArea in
19                    plotArea
20                        .background(Color(hue: 0.12, saturation: 0.10, brightness: 0.92))
21                }
22                // Place the y-axis on the leading side of the chart
23                .chartYAxis {
24                   AxisMarks(position: .leading)
25                }
26                .frame(height:400)
27            }
28            .groupBoxStyle(YellowGroupBoxStyle())
29            .padding()
30            
31            Spacer()
32        }
33    }
34}

Place y-axis on leading edge of chart using SwiftUI Charts

Place y-axis on leading edge of chart using SwiftUI Charts

Move the chart legend

The chart legend is displayed on the bottom leading edge of the chart by default. The legend can be placed on any side of the chart, or it can be placed over the chart in a number of locations.

 1        GroupBox ( "Line Chart - legend overlay on top center") {
 2            Chart {
 3                ForEach(stepData, id: \.period) { steps in
 4                    ForEach(steps.data) {
 5                        LineMark(
 6                            x: .value("Week Day", $0.shortDay),
 7                            y: .value("Step Count", $0.steps)
 8                        )
 9                        .foregroundStyle(by: .value("Week", steps.period))
10                        .accessibilityLabel("\($0.weekdayString)")
11                        .accessibilityValue("\($0.steps) Steps")
12                    }
13                }
14            }
15            // Position the Legend
16            .chartLegend(position: .overlay, alignment: .top)
17
18            .chartPlotStyle { plotArea in
19                plotArea
20                    .background(Color(hue: 0.12, saturation: 0.10, brightness: 0.92))
21            }
22            .chartYAxis() {
23                AxisMarks(position: .leading)
24            }
25            .frame(height:200)
26        }
27        .groupBoxStyle(YellowGroupBoxStyle())

 1        GroupBox ( "Line Chart - legend trailing center") {
 2            Chart {
 3                ForEach(stepData, id: \.period) { steps in
 4                    ForEach(steps.data) {
 5                        LineMark(
 6                            x: .value("Week Day", $0.shortDay),
 7                            y: .value("Step Count", $0.steps)
 8                        )
 9                        .foregroundStyle(by: .value("Week", steps.period))
10                        .accessibilityLabel("\($0.weekdayString)")
11                        .accessibilityValue("\($0.steps) Steps")
12                    }
13                }
14            }
15            // Position the Legend
16            .chartLegend(position: .trailing, alignment: .center, spacing: 10)
17
18            .chartPlotStyle { plotArea in
19                plotArea
20                    .background(Color(hue: 0.12, saturation: 0.10, brightness: 0.92))
21            }
22            .chartYAxis() {
23                AxisMarks(position: .leading)
24            }
25            .frame(height:200)
26        }
27        .groupBoxStyle(YellowGroupBoxStyle())

Position the legend, such as on top or left of chart using SwiftUI Charts

Position the legend, such as on top or left of chart using SwiftUI Charts

Change the line curve

The line chart connects the data points on the chart with a straight line. The interpolationMethod function can be used to round the connection curve in a variety of ways.

 1struct ChartView6: View {
 2    var body: some View {
 3        VStack(spacing:30) {
 4            GroupBox ( "Line Chart - Curved line connector") {
 5                Chart {
 6                    ForEach(stepData, id: \.period) { steps in
 7                        ForEach(steps.data) {
 8                            LineMark(
 9                                x: .value("Week Day", $0.shortDay),
10                                y: .value("Step Count", $0.steps)
11                            )
12                            .foregroundStyle(by: .value("Week", steps.period))
13                            // Use curved line to join points
14                            .interpolationMethod(.catmullRom)
15                            .accessibilityLabel("\($0.weekdayString)")
16                            .accessibilityValue("\($0.steps) Steps")
17                        }
18                    }
19                }
20                .chartLegend(position: .overlay, alignment: .top)
21                .chartPlotStyle { plotArea in
22                    plotArea
23                        .background(Color(hue: 0.12, saturation: 0.10, brightness: 0.92))
24                }
25                .chartYAxis() {
26                    AxisMarks(position: .leading)
27                }
28                .frame(height:300)
29            }
30            .groupBoxStyle(YellowGroupBoxStyle())
31            
32            GroupBox ( "Line Chart - Step line connector") {
33                Chart {
34                    ForEach(stepData, id: \.period) { steps in
35                        ForEach(steps.data) {
36                            LineMark(
37                                x: .value("Week Day", $0.shortDay),
38                                y: .value("Step Count", $0.steps)
39                            )
40                            .foregroundStyle(by: .value("Week", steps.period))
41                            // Use step line to join points
42                            .interpolationMethod(.stepCenter)
43                            .accessibilityLabel("\($0.weekdayString)")
44                            .accessibilityValue("\($0.steps) Steps")
45                        }
46                    }
47                }
48                .chartLegend(position: .overlay, alignment: .top)
49                .chartPlotStyle { plotArea in
50                    plotArea
51                        .background(Color(hue: 0.12, saturation: 0.10, brightness: 0.92))
52                }
53                .chartYAxis() {
54                    AxisMarks(position: .leading)
55                }
56                .frame(height:300)
57            }
58            .groupBoxStyle(YellowGroupBoxStyle())
59            
60
61            Spacer()
62        }
63        .padding()
64    }
65}

Change line connecting the data poinst to curve in SwiftUI Charts

Change line connecting the data poinst to curve in SwiftUI Charts

Change the line colors

The default colors for the lines in the line chart can be set using chartForegroundStyleScale

 1struct ChartView7: View {
 2    var body: some View {
 3        VStack() {
 4            GroupBox ( "Line Chart - Custom line colors") {
 5                Chart {
 6                    ForEach(stepData, id: \.period) { steps in
 7                        ForEach(steps.data) {
 8                            LineMark(
 9                                x: .value("Week Day", $0.shortDay),
10                                y: .value("Step Count", $0.steps)
11                            )
12                            .foregroundStyle(by: .value("Week", steps.period))
13                            .interpolationMethod(.catmullRom)
14                            .symbol(by: .value("Week", steps.period))
15                            .symbolSize(30)
16                            .accessibilityLabel("\($0.weekdayString)")
17                            .accessibilityValue("\($0.steps) Steps")
18                        }
19                    }
20                }
21                // Set color for each data in the chart
22                .chartForegroundStyleScale([
23                    "Current Week" : Color(hue: 0.33, saturation: 0.81, brightness: 0.76),
24                    "Previous Week": Color(hue: 0.69, saturation: 0.19, brightness: 0.79)
25                ])
26                .chartLegend(position: .overlay, alignment: .top)
27                .chartPlotStyle { plotArea in
28                    plotArea
29                        .background(Color(hue: 0.12, saturation: 0.10, brightness: 0.92))
30                }
31                .chartYAxis() {
32                    AxisMarks(position: .leading)
33                }
34                .frame(height:400)
35            }
36            .groupBoxStyle(YellowGroupBoxStyle())
37           
38            Spacer()
39        }
40        .padding()
41    }
42}

Set custom colors for the lines in SwiftUI Charts

Set custom colors for the lines in SwiftUI Charts

Change the line style

The line on the line chart can be modified by setting a lineStyle using StrokeStyle. Two different styles are used in the step data to distinguish the previous week data from the current data. In addition, a custom symbol is set for the data points on the chart.

 1struct ChartView8: View {
 2    
 3    let prevColor = Color(hue: 0.69, saturation: 0.19, brightness: 0.79)
 4    let curColor = Color(hue: 0.33, saturation: 0.81, brightness: 0.76)
 5    
 6    var body: some View {
 7        VStack() {
 8            GroupBox ( "Line Chart - Line color and format") {
 9                Chart {
10                    ForEach(previousWeek) {
11                        LineMark(
12                            x: .value("Week Day", $0.shortDay),
13                            y: .value("Step Count", $0.steps)
14                        )
15                        .interpolationMethod(.catmullRom)
16                        .foregroundStyle(prevColor)
17                        .foregroundStyle(by: .value("Week", "Previous Week"))
18                        .lineStyle(StrokeStyle(lineWidth: 3, dash: [5, 10]))
19                        .symbol() {
20                            Rectangle()
21                                .fill(prevColor)
22                                .frame(width: 8, height: 8)
23                        }
24                        .symbolSize(30)
25                        .accessibilityLabel("\($0.weekdayString)")
26                        .accessibilityValue("\($0.steps) Steps")
27                    }
28                    
29                    ForEach(currentWeek) {
30                        LineMark(
31                            x: .value("Week Day", $0.shortDay),
32                            y: .value("Step Count", $0.steps)
33                        )
34                        .interpolationMethod(.catmullRom)
35                        .foregroundStyle(curColor)
36                        .foregroundStyle(by: .value("Week", "Current Week"))
37                        .lineStyle(StrokeStyle(lineWidth: 3))
38                        .symbol() {
39                            Circle()
40                                .fill(curColor)
41                                .frame(width: 10)
42                        }
43                        .symbolSize(30)
44                        .accessibilityLabel("\($0.weekdayString)")
45                        .accessibilityValue("\($0.steps) Steps")
46                    }
47                }
48                // Set the Y axis scale
49                .chartYScale(domain: 0...30000)
50                .chartForegroundStyleScale([
51                    "Current Week" : curColor,
52                    "Previous Week": prevColor
53                ])
54                .chartLegend(position: .overlay, alignment: .top)
55                .chartPlotStyle { plotArea in
56                    plotArea
57                        .background(Color(hue: 0.12, saturation: 0.10, brightness: 0.92))
58                }
59                .chartYAxis() {
60                    AxisMarks(position: .leading)
61                }
62                .frame(height:400)
63            }
64            .groupBoxStyle(YellowGroupBoxStyle())
65            Spacer()
66        }
67        .padding()
68    }
69}

Set custom line style for one data set in SwiftUI Charts

Set custom line style for one data set in SwiftUI Charts

Combine Area and Line plots

Finally, combine the line chart with an area chart to help differentiate one data set from another. Area chart is only added for the current week data and the color of the area is set to a gradient fading below the line.

 1struct ChartView9: View {
 2        
 3    var body: some View {
 4    
 5        let prevColor = Color(hue: 0.69, saturation: 0.19, brightness: 0.79)
 6        let curColor = Color(hue: 0.33, saturation: 0.81, brightness: 0.76)
 7        let curGradient = LinearGradient(
 8            gradient: Gradient (
 9                colors: [
10                    curColor.opacity(0.5),
11                    curColor.opacity(0.2),
12                    curColor.opacity(0.05),
13                ]
14            ),
15            startPoint: .top,
16            endPoint: .bottom
17        )
18
19        VStack() {
20            GroupBox ( "Line Chart - Combine LIne and Area chart") {
21                Chart {
22                    ForEach(previousWeek) {
23                        LineMark(
24                            x: .value("Week Day", $0.shortDay),
25                            y: .value("Step Count", $0.steps)
26                        )
27                        .interpolationMethod(.catmullRom)
28                        .foregroundStyle(prevColor)
29                        .foregroundStyle(by: .value("Week", "Previous Week"))
30                        .lineStyle(StrokeStyle(lineWidth: 3, dash: [5, 10]))
31                        .symbol() {
32                            Rectangle()
33                                .fill(prevColor)
34                                .frame(width: 8, height: 8)
35                        }
36                        .symbolSize(30)
37                        .accessibilityLabel("\($0.weekdayString)")
38                        .accessibilityValue("\($0.steps) Steps")
39                    }
40                    
41                    ForEach(currentWeek) {
42                        LineMark(
43                            x: .value("Week Day", $0.shortDay),
44                            y: .value("Step Count", $0.steps)
45                        )
46                        .interpolationMethod(.catmullRom)
47                        .foregroundStyle(curColor)
48                        .foregroundStyle(by: .value("Week", "Current Week"))
49                        .lineStyle(StrokeStyle(lineWidth: 3))
50                        .symbol() {
51                            Circle()
52                                .fill(curColor)
53                                .frame(width: 10)
54                        }
55                        .symbolSize(30)
56                        .accessibilityLabel("\($0.weekdayString)")
57                        .accessibilityValue("\($0.steps) Steps")
58
59                        AreaMark(
60                            x: .value("Week Day", $0.shortDay),
61                            y: .value("Step Count", $0.steps)
62                        )
63                        .interpolationMethod(.catmullRom)
64                        .foregroundStyle(curGradient)
65                        .foregroundStyle(by: .value("Week", "Current Week"))
66                        .accessibilityLabel("\($0.weekdayString)")
67                        .accessibilityValue("\($0.steps) Steps")
68                        
69                    }
70                }
71                // Set the Y axis scale
72                .chartYScale(domain: 0...30000)
73                
74                .chartForegroundStyleScale([
75                    "Current Week" : curColor,
76                    "Previous Week": prevColor
77                ])
78                .chartLegend(position: .overlay, alignment: .top)
79                .chartPlotStyle { plotArea in
80                    plotArea
81                        .background(Color(hue: 0.12, saturation: 0.10, brightness: 0.92))
82                }
83                .chartYAxis() {
84                    AxisMarks(position: .leading)
85                }
86                .frame(height:400)
87            }
88            .groupBoxStyle(YellowGroupBoxStyle())
89            Spacer()
90        }
91        .padding()
92    }
93}

Combine a line chart with an area chart using custom colors in SwiftUI Charts

Combine a line chart with an area chart using custom colors in SwiftUI Charts

Conclusion

SwiftUI Charts is currently in beta, and there can be some issues with Xcode performance and compiling some chart options, but it is easy to get started with charts. The help documentation is available and is good, but I would like to see more code examples. There is great potential to customise charts to present data in an intuitive manner to customers of an App.

Code for Line and Area Chart is available on GitHub.

Create a line chart with SwiftUI Charts in iOS 16

Eric Callanan — Sunday, 07 Aug 2022

Apple introduced SwiftUI Charts at WWWDC 2022, which makes it incredibly easy to create charts within SwiftUI views. Charts are a great way of presenting visual data in a rich format that is easy to understand. This article shows how to easily create a line chart with so much less code than was previously used to create the same line chart from scratch. It is also so much easier to customise the look and feel of the chart as well as make the information in the chart accessible.

It is possible to create a line chart without using SwiftUI Charts as shown in previous articles. However, the use of Charts framework makes it so much easier by providing a large variety of charts to explore what works best for the data in an App.

Here are previous articles on creating Bar and Line charts from scratch in SwiftUI.

Create a line chart in SwiftUI

How to create a Bar Chart in SwiftUI

Simple Line chart

Start with data containing step counts for a week similar to data used in Create a line chart in SwiftUI. Define a structure to hold the date and the step count for that day and create an array of these for the current week.

 1struct StepCount: Identifiable {
 2    let id = UUID()
 3    let weekday: Date
 4    let steps: Int
 5    
 6    init(day: String, steps: Int) {
 7        let formatter = DateFormatter()
 8        formatter.dateFormat = "yyyyMMdd"
 9        
10        self.weekday = formatter.date(from: day) ?? Date.distantPast
11        self.steps = steps
12    }
13}
14
15
16let currentWeek: [StepCount] = [
17    StepCount(day: "20220717", steps: 4200),
18    StepCount(day: "20220718", steps: 15000),
19    StepCount(day: "20220719", steps: 2800),
20    StepCount(day: "20220720", steps: 10800),
21    StepCount(day: "20220721", steps: 5300),
22    StepCount(day: "20220722", steps: 10400),
23    StepCount(day: "20220723", steps: 4000)
24]

To create a Line Chart, create a Chart with a LineMark for each element in the step count data. Specify the Weekday for the x value and the step count for the y value for the LineMark. Note that it is also necessary to import the Charts framework.

That's it. This creates a line chart for the step count data. As there is only one series of data, the ForEach can be left out and the data can be passed directly to the Chart initializer. Both sections produce the same line chart.

 1import SwiftUI
 2import Charts
 3
 4struct LineChart1: View {
 5    var body: some View {
 6        VStack {
 7            GroupBox ( "Line Chart - Step Count") {
 8                Chart {
 9                    ForEach(currentWeek) {
10                        LineMark(
11                            x: .value("Week Day", $0.weekday, unit: .day),
12                            y: .value("Step Count", $0.steps)
13                        )
14                    }
15                }
16            }
17            
18            GroupBox ( "Line Chart - Step Count") {
19                Chart(currentWeek) {
20                    LineMark(
21                        x: .value("Week Day", $0.weekday, unit: .day),
22                        y: .value("Step Count", $0.steps)
23                    )
24                    
25                }
26            }
27        }
28    }
29}

Line charts created with SwiftUI Charts showing daily step counts

Line charts created with SwiftUI Charts showing daily step counts

Other charts

There are a number of charting options available from SwiftUI Charts. These can be generated by changing the chart marks from LineMark to one of the other types of marks such as BarMark for a Bar Chart.

 1struct OtherCharts: View {
 2    var body: some View {
 3        VStack {
 4            GroupBox ( "Line Chart - Step count") {
 5                Chart(currentWeek) {
 6                    LineMark(
 7                        x: .value("Week Day", $0.weekday, unit: .day),
 8                        y: .value("Step Count", $0.steps)
 9                    )
10                }
11            }
12            
13            GroupBox ( "Bar Chart - Step count") {
14                Chart(currentWeek) {
15                    BarMark(
16                        x: .value("Week Day", $0.weekday, unit: .day),
17                        y: .value("Step Count", $0.steps)
18                    )
19                }
20            }
21            
22            GroupBox ( "Point Chart - Step count") {
23                Chart(currentWeek) {
24                    PointMark(
25                        x: .value("Week Day", $0.weekday, unit: .day),
26                        y: .value("Step Count", $0.steps)
27                    )
28                }
29            }
30            
31            GroupBox ( "Rectangle Chart - Step count") {
32                Chart(currentWeek) {
33                    RectangleMark(
34                        x: .value("Week Day", $0.weekday, unit: .day),
35                        y: .value("Step Count", $0.steps)
36                    )
37                }
38            }
39            
40            GroupBox ( "Area Chart - Step count") {
41                Chart(currentWeek) {
42                    AreaMark(
43                        x: .value("Week Day", $0.weekday, unit: .day),
44                        y: .value("Step Count", $0.steps)
45                    )
46                }
47            }
48        }
49    }
50}

Other chart types created with SwiftUI Charts showing daily step counts

Other chart types created with SwiftUI Charts showing daily step counts

Make Line Chart Accessible

One advantage of having Charts baked into SwiftUI is that it is easy to make the charts accessibile using Accessibility modifiers. Add a computed property to StepCount to return the data as a string, which can be used by accessibilityLabel. Then add accessibility label and value for each mark in the chart.

 1struct StepCount: Identifiable {
 2    let id = UUID()
 3    let weekday: Date
 4    let steps: Int
 5    
 6    init(day: String, steps: Int) {
 7        let formatter = DateFormatter()
 8        formatter.dateFormat = "yyyyMMdd"
 9        
10        self.weekday = formatter.date(from: day) ?? Date.distantPast
11        self.steps = steps
12    }
13    
14    var weekdayString: String {
15        let dateFormatter = DateFormatter()
16        dateFormatter.dateFormat = "yyyyMMdd"
17        dateFormatter.dateStyle = .long
18        dateFormatter.timeStyle = .none
19        dateFormatter.locale = Locale(identifier: "en_US")
20        return  dateFormatter.string(from: weekday)
21    }
22}

 1    GroupBox ( "Line Chart - Daily Step Count") {
 2        Chart(currentWeek) {
 3            LineMark(
 4                x: .value("Week Day", $0.weekday, unit: .day),
 5                y: .value("Step Count", $0.steps)
 6            )
 7            .accessibilityLabel($0.weekdayString)
 8            .accessibilityValue("\($0.steps) Steps")
 9        }
10    }

Make line chart accessibile in SwiftUI Charts

Make line chart accessibile in SwiftUI Charts

Add multiple data series to Line Chart

A line chart is a great way to compare two different series of data. Create a second series of step counts for the previous week and add both series to a line chart.

 1let previousWeek: [StepCount] = [
 2    StepCount(day: "20220710", steps: 15800),
 3    StepCount(day: "20220711", steps: 7300),
 4    StepCount(day: "20220712", steps: 8200),
 5    StepCount(day: "20220713", steps: 25600),
 6    StepCount(day: "20220714", steps: 16100),
 7    StepCount(day: "20220715", steps: 16500),
 8    StepCount(day: "20220716", steps: 3200)
 9]
10
11let currentWeek: [StepCount] = [
12    StepCount(day: "20220717", steps: 4200),
13    StepCount(day: "20220718", steps: 15000),
14    StepCount(day: "20220719", steps: 2800),
15    StepCount(day: "20220720", steps: 10800),
16    StepCount(day: "20220721", steps: 5300),
17    StepCount(day: "20220722", steps: 10400),
18    StepCount(day: "20220723", steps: 4000)
19]
20
21let stepData = [
22    (period: "Current Week", data: currentWeek),
23    (period: "Previous Week", data: previousWeek)
24]

The first attempt to add these two series of data does not display as expected.

 1struct LineChart2: View {
 2    var body: some View {
 3        GroupBox ( "Line Chart - Daily Step Count") {
 4            Chart {
 5                ForEach(stepData, id: \.period) {
 6                    ForEach($0.data) {
 7                        LineMark(
 8                            x: .value("Week Day", $0.weekday, unit: .day),
 9                            y: .value("Step Count", $0.steps)
10                        )
11                        .accessibilityLabel($0.weekdayString)
12                        .accessibilityValue("\($0.steps) Steps")
13                    }
14                }
15            }
16        }
17    }
18}

First attempt to create a line chart in SwiftUI Charts with two series of step count data

First attempt to create a line chart in SwiftUI Charts with two series of step count data

Display multiple series of step count based on weekday in Line Chart

The issue with the initial attempt to display multiple sets of data in a line chart is the use of date for the x-axis. The current wee follows on from the previous week so each point is plotted in a linear progression along the x-axis.

It is necessary to use just the weekday as the x-axis values, so that all Sundays are plotted at the same x-coordinate.

Add another computed property to the StepCount to return the short day in a string format for the weekday date.

 1struct StepCount: Identifiable {
 2
 3    . . .
 4    
 5        
 6    var shortDay: String {
 7        let dateFormatter = DateFormatter()
 8        dateFormatter.dateFormat = "EEE"
 9        return  dateFormatter.string(from: weekday)
10    }
11}

This shortDay is used for the x-value of the LineMarks in the chart. In addition, the style of the foreground is set to be based on the period of the stepCount array. The line chart displays the step counts for both weeks using the weekdays for the x-axis for easy comparison between the weeks.

 1struct LineChart3: View {
 2    var body: some View {
 3        VStack {
 4            GroupBox ( "Line Chart - Daily Step Count") {
 5                Chart {
 6                    ForEach(stepData, id: \.period) { steps in
 7                        ForEach(steps.data) {
 8                            LineMark(
 9                                x: .value("Week Day", $0.shortDay),
10                                y: .value("Step Count", $0.steps)
11                            )
12                            .foregroundStyle(by: .value("Week", steps.period))
13                            .accessibilityLabel($0.weekdayString)
14                            .accessibilityValue("\($0.steps) Steps")
15                        }
16                    }
17                }
18                .frame(height:400)
19            }
20            .padding()
21
22            Spacer()
23        }
24    }
25}

Line chart in SwiftUI Charts with two series of step count data

Line chart in SwiftUI Charts with two series of step count data

Conclusion

There is so much more to explore in SwiftUI Charts. It is clearly better to use this framework rather than building your own charts from scratch.

Create a line chart in SwiftUI

Eric Callanan — Sunday, 14 Nov 2021

A line chart is a graphical representation of changes in some data over time or between categories. The chart consists of two axes; x-axis is the horizontal axis representing the time change; and y-axis is the vertical axis representing the magnitude of the data. This article demonstrates how to create simple line charts using shapes in SwiftUI.

A Line chart is great for showing a change over time or showing differences between categories. Line charts are also useful to compare the change in a number of variables relative to each other. Data presented in a line chart can be much more quickly and easily understood than the same data presented in a table.

Draw a line joining a number of points

Start by defining a LineShape that takes a list of double values and uses Path to draw lines from one value to the next. The x-axis is divided into the number of data points with values between 0.0 and 1.0 (this will be addressed later). This is similar to the LineShape shown in How to animate a Shape change in SwiftUI, except the animation is not required and has been removed.

 1struct LineShape: Shape {
 2    var yValues: [Double]
 3
 4    func path(in rect: CGRect) -> Path {
 5        let xIncrement = (rect.width / (CGFloat(yValues.count) - 1))
 6        var path = Path()
 7        path.move(to: CGPoint(x: 0.0,
 8                              y: yValues[0] * Double(rect.height)))
 9        for i in 1..<yValues.count {
10            let pt = CGPoint(x: (Double(i) * Double(xIncrement)),
11                             y: (yValues[i] * Double(rect.height)))
12            path.addLine(to: pt)
13        }
14        return path
15    }
16}

 1struct ContentView: View {
 2    var body: some View {
 3        VStack {
 4            Text("Line Chart")
 5            
 6            ZStack {
 7                Rectangle()
 8                    .stroke(Color.gray, lineWidth: 3.0)
 9                    .frame(width: 300, height: 300, alignment: .center)
10                
11                LineShape(yValues: [0.2, 0.4, 0.3, 0.8, 0.5])
12                    .stroke(Color.red, lineWidth: 2.0)
13                    .frame(width: 300, height: 300, alignment: .center)
14            }
15            
16            Spacer()
17        }
18    }   
19}

Initial line defaults to 0 on top resulting is y-axis reversed

Initial line defaults to 0 on top resulting is y-axis reversed

Set y-axis zero on bottom

The default coordinate system in iOS is to start with (0,0) at the top left with the y-coordinate increasing down the screen. So the initial line chart seems to have the reverse y values, as line charts usually have the y-axis increasing from bottom to top. This is corrected by subtracting the y-values from 1.0 before adjusting for height in the LineShape.

 1struct LineShape: Shape {
 2    var yValues: [Double]
 3
 4    func path(in rect: CGRect) -> Path {
 5        let xIncrement = (rect.width / (CGFloat(yValues.count) - 1))
 6        var path = Path()
 7        path.move(to: CGPoint(x: 0.0,
 8                              y: (1.0 - yValues[0]) * Double(rect.height)))
 9        for i in 1..<yValues.count {
10            let pt = CGPoint(x: (Double(i) * Double(xIncrement)),
11                             y: (1.0 - yValues[i]) * Double(rect.height))
12            path.addLine(to: pt)
13        }
14        return path
15    }
16}

Line chart with y-axis corrected for 0 on bottom

Line chart with y-axis corrected for 0 on bottom

Create layout for Line Chart

Create a number of SwiftUI views to layout the Line chart - similar to the bar chart layout in How to create a Bar Chart in SwiftUI. LineChartView is composed of a header and a chart area, where the chart area uses the LineShape to plot the line. This separation makes it easier to develop the different sections and multiple charts can be added to the main view to ensure the results are as expected.

 1struct ContentView: View {
 2    var body: some View {
 3        ZStack {
 4            Color(red: 208/255, green: 225/255, blue: 242/255, opacity: 0.4)
 5                .edgesIgnoringSafeArea(.all)
 6            
 7            VStack {
 8                Text("Line Chart")
 9                
10                LineChartView(
11                    title: "the chart title",
12                    data: [0.2, 0.4, 0.3, 0.8, 0.5])
13                    .frame(width: 300, height: 300, alignment: .center)
14                
15                Spacer().frame(height:50)
16                
17                HStack {
18                    LineChartView(
19                        title: "One",
20                        data: [0.88, 0.76, 0.92, 0.18, 0.7, 0.51, 0.66, 0.35, 0.53])
21                        .frame(width: 100, height: 100, alignment: .center)
22                    
23                    Spacer().frame(width:50)
24
25                    LineChartView(
26                        title: "Two",
27                        data: [0.88, 0.76, 0.92, 0.18, 0.7, 0.51, 0.66, 0.35, 0.53, 0.63, 0.58, 0.24, 0.39, 0.47, 0.34, 0.45, 0.64, 0.1, 0.27, 0.16, 0.37, 0.53, 0.62, 0.39, 0.32, 0.24, 0.42, 0.6, 0.79, 0.54, 0.26, 0.74, 0.61, 0.83, 0.1, 0.47, 0.14, 0.86, 0.73, 0.62, 0.23, 0.11, 0.78, 0.12, 0.23, 0.33, 0.11, 0.94, 0.74, 0.19])
28                        .frame(width: 150, height: 100, alignment: .center)
29                }
30                
31                Spacer()
32            }
33        }
34    }
35}

 1struct LineChartView: View {
 2    var title: String
 3    var data: [Double]
 4    
 5    var body: some View {
 6        GeometryReader { gr in
 7            let headHeight = gr.size.height * 0.10
 8            VStack {
 9                ChartHeaderView(title: title, height: headHeight)
10                ChartAreaView(data: data)
11            }
12        }
13    }
14}

1struct ChartHeaderView: View {
2    var title: String
3    var height: CGFloat
4    
5    var body: some View {
6        Text(title)
7            .frame(height: height)
8    }
9}

 1struct ChartAreaView: View {
 2    var data: [Double]
 3    
 4    var body: some View {
 5        ZStack {
 6            RoundedRectangle(cornerRadius: 5.0)
 7                .fill(Color(#colorLiteral(red: 0.8906477705, green: 0.9005050659, blue: 0.8208766097, alpha: 1)))
 8            
 9            LineShape(yValues: data)
10                .stroke(Color.red, lineWidth: 2.0)
11        }
12    }
13}

Line charts composed of multiple SwiftUI views

Line charts composed of multiple SwiftUI views

Allow range of numbers on y-axis

The initial chart only allows for y-values between 0.0 and 1.0. Change the LineShape to set the y-axis based on the max value to plot. The y-coordinate of each point is relative to the maximum value in the data series.

 1struct LineShape: Shape {
 2    var yValues: [Double]
 3    
 4    func path(in rect: CGRect) -> Path {
 5        let xIncrement = (rect.width / (CGFloat(yValues.count) - 1))
 6        let factor = rect.height / CGFloat(yValues.max() ?? 1.0)
 7        var path = Path()
 8        path.move(to: CGPoint(x: 0.0,
 9                              y: (rect.height - (yValues[0] * factor))))
10        for i in 1..<yValues.count {
11            let pt = CGPoint(x: (Double(i) * Double(xIncrement)),
12                             y: (rect.height - (yValues[i] * factor)))
13            path.addLine(to: pt)
14        }
15        return path
16    }
17}

The sample line charts are updated to ranges of values other than 0 to 1.

 1struct ContentView: View {
 2    var body: some View {
 3        ZStack {
 4            Color(red: 208/255, green: 225/255, blue: 242/255, opacity: 0.4)
 5                .edgesIgnoringSafeArea(.all)
 6            
 7            VStack {
 8                Text("Line Chart")
 9                
10                LineChartView(
11                    title: "the chart title",
12                    data: [164, 182, 212, 198, 242, 30, 158, 6, 67, 195, 104, 125, 125, 92, 81, 188, 50, 155, 225, 243, 53, 141, 32, 1])
13                    .frame(width: 300, height: 300, alignment: .center)
14                
15                Spacer().frame(height:50)
16                
17                HStack {
18                    LineChartView(
19                        title: "One",
20                        data: [0.88, 0.76, 0.92, 0.18, 0.7, 0.51, 0.66, 0.35, 0.53])
21                        .frame(width: 100, height: 100, alignment: .center)
22                    
23                    Spacer().frame(width:50)
24
25                    LineChartView(
26                        title: "Two",
27                        data: [6, 30, 195, 164, 182, 198, 212, 400])
28                        .frame(width: 150, height: 100, alignment: .center)
29                }
30                
31                Spacer()
32            }
33        }
34    }
35}

Line charts with y-values ranges greater than 1

Line charts with y-values ranges greater than 1

Add the x-axis and y-axis

A lot of the work done on the axes for a bar chart in Add Axes to a Bar Chart in SwiftUI can be reused. The LineChartData is structured to contain a list of values for each x-value, this could possibly be restructured in a number of ways. However, it is easy to transform the data into a sequence of values for each line using the Swift map function. The YaxisView, XaxisView and KeyView are all used with minor modifications.

 1struct DataItem: Identifiable {
 2    let name: String
 3    let values: [Double]
 4    let id = UUID()
 5}
 6
 7struct LineChartData {
 8    let keys: [String]
 9    let data: [DataItem]
10}

 1struct YaxisView: View {
 2    var ticks: [Int]
 3    var scaleFactor: Double
 4    
 5    var body: some View {
 6        GeometryReader { gr in
 7            let fullChartHeight = gr.size.height
 8            ZStack {
 9                // y-axis line
10                Rectangle()
11                    .fill(Color.black)
12                    .frame(width:1.5)
13                    .offset(x: (gr.size.width/2.0)-1, y: 1)
14                
15                // Tick marks
16                ForEach(ticks, id:\.self) { t in
17                    HStack {
18                        Spacer()
19                        Text("\(t)")
20                            .font(.footnote)
21                        Rectangle()
22                            .frame(width: 10, height: 1)
23                    }
24                    .offset(y: (fullChartHeight/2.0) - (CGFloat(t) * CGFloat(scaleFactor)))
25                }
26            }
27        }
28    }
29}

 1struct XaxisView: View {
 2    var data: [DataItem]
 3    
 4    var body: some View {
 5        GeometryReader { gr in
 6            let labelWidth = (gr.size.width * 0.9) / CGFloat(data.count)
 7            let padWidth = (gr.size.width * 0.05) / CGFloat(data.count)
 8            ZStack {
 9                Rectangle()
10                    .fill(Color(#colorLiteral(red: 0.8906477705, green: 0.9005050659, blue: 0.8208766097, alpha: 1)))
11                
12                Rectangle()
13                    .fill(Color.black)
14                    .frame(height: 1.5)
15                    .offset(x: 0, y: -(gr.size.height/2.0))
16                
17                HStack(spacing:0) {
18                    ForEach(data) { item in
19                        Text(item.name)
20                            .font(.footnote)
21                            .frame(width:labelWidth, height: gr.size.height)
22                    }
23                    .padding(.horizontal, padWidth)
24                }
25            }
26        }
27    }
28}

 1struct KeyView: View {
 2    let keys: [String]
 3    
 4    var body: some View {
 5        HStack {
 6            ForEach(keys.indices) { i in
 7                HStack(spacing:0) {
 8                    Image(systemName: "square.fill")
 9                        .foregroundColor(colors[i])
10                    Text("\(keys[i])")
11                }
12                .font(.footnote)
13            }
14        }
15    }
16}

The LineChartView is modified to use LineChartData and to set the layout for the chart with axes and key. The data from LineChartData is passed into ChartAreaView.

 1struct LineChartView: View {
 2    var title: String
 3    var chartData: LineChartData
 4    
 5    let isShowingKey = true
 6    
 7    var body: some View {
 8        let data = chartData.data
 9        GeometryReader { gr in
10            let headHeight = gr.size.height * 0.10
11            let maxValue = data.flatMap { $0.values }.max()!
12            let axisWidth = gr.size.width * 0.15
13            let axisHeight = gr.size.height * 0.1
14            let keyHeight = gr.size.height * (isShowingKey ? 0.1 : 0.0)
15            let fullChartHeight = gr.size.height - axisHeight - headHeight - keyHeight
16            
17            let tickMarks = AxisParameters.getTicks(top: Int(maxValue))
18            let scaleFactor = (fullChartHeight * 0.95) / CGFloat(tickMarks[tickMarks.count-1])
19            
20            VStack {
21                ChartHeaderView(title: title)
22                    .frame(height: headHeight)
23                
24                ZStack {
25                    Rectangle()
26                        .fill(Color(#colorLiteral(red: 0.8906477705, green: 0.9005050659, blue: 0.8208766097, alpha: 1)))
27                    
28                    VStack(spacing:0) {
29                        if isShowingKey {
30                            KeyView(keys: chartData.keys)
31                                .frame(height: keyHeight)
32                        }
33                        
34                        HStack(spacing:0) {
35                            YaxisView(ticks: tickMarks, scaleFactor: Double(scaleFactor))
36                                .frame(width:axisWidth, height: fullChartHeight)
37                            ChartAreaView(data: data, scaleFactor: Double(scaleFactor))
38                                .frame(height: fullChartHeight)
39                        }
40                        
41                        HStack(spacing:0) {
42                            Rectangle()
43                                .fill(Color.clear)
44                                .frame(width:axisWidth, height:axisHeight)
45                            XaxisView(data: data)
46                                .frame(height:axisHeight)
47                        }
48                    }
49                }
50            }
51        }
52    }
53}

The ChartAreaView is updated to take a list of DataItems and transforms the data into an array for each line, which is passed to the LineShape to draw.

 1struct ChartAreaView: View {
 2    var data: [DataItem]
 3    var scaleFactor: Double
 4    
 5    var body: some View {
 6        ZStack {
 7            RoundedRectangle(cornerRadius: 5.0)
 8                .fill(Color(#colorLiteral(red: 0.8906477705, green: 0.9005050659, blue: 0.8208766097, alpha: 1)))
 9            
10            ForEach(data[0].values.indices) { i in
11                let list = data.map { $0.values[i] }
12                LineShape(yValues: list, scaleFactor: scaleFactor)
13                    .stroke(colors[i], lineWidth: 2.0)
14            }
15        }
16    }
17}

 1struct ContentView: View {
 2
 3    let stepData = LineChartData(
 4        keys: ["Current Week", "Previous Week"],
 5        data: [
 6            DataItem(name: "Mon", values: [4.2, 15.8]),
 7            DataItem(name: "Tue", values: [15.8, 7.3]),
 8            DataItem(name: "Wed", values: [2.8, 8.2]),
 9            DataItem(name: "Thu", values: [10.8, 25.6]),
10            DataItem(name: "Fri", values: [5.3, 16.1]),
11            DataItem(name: "Sat", values: [10.4, 16.5]),
12            DataItem(name: "Sun", values: [4.0, 3.2])
13        ])    
14    
15    var body: some View {
16        ZStack {
17            Color(red: 208/255, green: 225/255, blue: 242/255, opacity: 0.4)
18                .edgesIgnoringSafeArea(.all)
19            
20            VStack {
21                LineChartView(
22                    title: "Daily step count (1000)",
23                    chartData: stepData)
24                    .frame(width: 300, height: 500, alignment: .center)
25                                
26                Spacer()
27            }
28        }
29    }
30}

Line chart containing two lines and displaying x and y axes

Line chart containing two lines and displaying x and y axes

Align the x-axis

In the chart above, the points on the chart do not align with the labels on the x-axis. The labels are spaced evenly below the axis, but the points for the line begin on the y-axis and end on the edge of the chart. Tick marks on the x-axis do not add any value in the bar chart, but would be valuable on a line chart.

Tick marks are added to the XaxisView using Rectangles above the test labels.

 1struct XaxisView: View {
 2    var data: [DataItem]
 3    
 4    var body: some View {
 5        GeometryReader { gr in
 6            let labelWidth = (gr.size.width * 0.9) / CGFloat(data.count)
 7            let padWidth = (gr.size.width * 0.05) / CGFloat(data.count)
 8            let labelHeight = gr.size.height
 9            let tickHeight = gr.size.height * 0.12
10            ZStack {
11                Rectangle()
12                    .fill(Color(#colorLiteral(red: 0.8906477705, green: 0.9005050659, blue: 0.8208766097, alpha: 1)))
13                
14                Rectangle()
15                    .fill(Color.black)
16                    .frame(height: 1.5)
17                    .offset(x: 0, y: -(gr.size.height/2.0))
18                
19                HStack(spacing:0) {
20                    ForEach(data) { item in
21                        ZStack {
22                            VStack {
23                                Rectangle()
24                                    .frame(width: 1, height: tickHeight)
25                                Spacer()
26                            }
27                            Text(item.name)
28                                .font(.footnote)
29                            .frame(width:labelWidth, height: labelHeight)
30                        }
31                    }
32                    .padding(.horizontal, padWidth)
33                }
34            }
35        }
36    }
37}

The horizontal spacing for the x points is updated in the LineShape. The points are spread evenly across the x-axis by creating an increment value and setting the first point to be mid-way along this increment. The points on the chart now lign up with the tick marks on the x-axis.

 1struct LineShape: Shape {
 2    var yValues: [Double]
 3    var scaleFactor: Double
 4    
 5    func path(in rect: CGRect) -> Path {
 6        let xIncrement = (rect.width / (CGFloat(yValues.count)))
 7        var xValue = xIncrement * 0.5
 8        var path = Path()
 9        path.move(to: CGPoint(x: xValue,
10                              y: (rect.height - (yValues[0] * scaleFactor))))
11        for i in 1..<yValues.count {
12            xValue += xIncrement
13            let pt = CGPoint(x: xValue,
14                             y: (rect.height - (yValues[i] * scaleFactor)))
15            path.addLine(to: pt)
16        }
17        return path
18    }
19}

Line chart with points correctly aligned with x-axis

Line chart with points correctly aligned with x-axis

Display real data in the Line Chart

Here is the comparison of population changes in two countries shown in tabular format and using the Line Chart.

Population changes in Ireland and The Gambia

Year	Ireland	The Gambia
2000	3.79	1.32
2001	3.85	1.36
2002	3.93	1.40
2003	3.98	1.45
2004	4.05	1.50
2005	4.13	1.54
2006	4.23	1.59
2007	4.38	1.64
2008	4.49	1.69
2009	4.53	1.74
2010	4.55	1.79
2011	4.57	1.85
2012	4.59	1.91
2013	4.61	1.96
2014	4.65	2.02
2015	4.69	2.09
2016	4.74	2.15
2017	4.79	2.21
2018	4.86	2.28
2019	4.92	2.35
2020	4.98	2.42
2021	5.01	2.51

 1struct ContentView: View {
 2    let popData = LineChartData(
 3        keys: ["Ireland", "The Gambia"],
 4        data: [
 5            DataItem(name: "2000", values: [3.79, 1.32]),
 6            DataItem(name: "2001", values: [3.85, 1.36]),
 7            DataItem(name: "2002", values: [3.93, 1.40]),
 8            DataItem(name: "2003", values: [3.98, 1.45]),
 9            DataItem(name: "2004", values: [4.05, 1.50]),
10            DataItem(name: "2005", values: [4.13, 1.54]),
11            DataItem(name: "2006", values: [4.23, 1.59]),
12            DataItem(name: "2007", values: [4.38, 1.64]),
13            DataItem(name: "2008", values: [4.49, 1.69]),
14            DataItem(name: "2009", values: [4.53, 1.74]),
15            DataItem(name: "2010", values: [4.55, 1.79]),
16            DataItem(name: "2011", values: [4.57, 1.85]),
17            DataItem(name: "2012", values: [4.59, 1.91]),
18            DataItem(name: "2013", values: [4.61, 1.96]),
19            DataItem(name: "2014", values: [4.65, 2.02]),
20            DataItem(name: "2015", values: [4.69, 2.09]),
21            DataItem(name: "2016", values: [4.74, 2.15]),
22            DataItem(name: "2017", values: [4.79, 2.21]),
23            DataItem(name: "2018", values: [4.86, 2.28]),
24            DataItem(name: "2019", values: [4.92, 2.35]),
25            DataItem(name: "2020", values: [4.98, 2.42]),
26            DataItem(name: "2021", values: [5.01, 2.51])
27        ])
28    
29    var body: some View {
30        ZStack {
31            Color(red: 208/255, green: 225/255, blue: 242/255, opacity: 0.4)
32                .edgesIgnoringSafeArea(.all)
33            
34            VStack {
35                LineChartView(
36                    title: "Population Data (million)",
37                    chartData: popData)
38                    .frame(width: 1000, height: 500, alignment: .center)
39                                
40                Spacer()
41            }
42        }
43    }
44}

Line chart comparing polulation growth in the last 20 years between Ireland and The Gambia

Line chart comparing polulation growth in the last 20 years between Ireland and The Gambia

Conclusion

A line chart can be created using the SwiftUI Path structure in a 2D shape to draw a line between consecutive points. It is relatively easy to get started with a basic chart, but there is more work to customise the layout as well as add labels and annotate the chart. The code in this article leveraged code developed for the bar chart. There is still room to improve the line chart such as adding labels on the axes or the ability to rotate the x-axis labels.