scroll on Software Development Notes

Scroll transition effects in iOS 17

Eric Callanan — Sunday, 28 Jan 2024

Apple added scroll transition effects in iOS 17 that allow items behavior to be animated as they scroll into and out of view. There are a number of attributes that can be modified such as size, visibility as well as rotation of the object.

Card view to scroll

Start by defining a view to contain an image of an animal on a card. Load a group of images into resources for the App and label these from 'animal-01 to 'animal-25'. On the Card View, the images are set to resizable and scaledToFit, so the images are not distorted and a pale yellow border surrounds the pictures. Define a list of Animals that contains a list of identifiable Animal objects.

AnimalCardView

 1struct AnimalCardView: View {
 2    var animal: Animal
 3    
 4    var body: some View {
 5        ZStack {
 6            RoundedRectangle(cornerRadius: 40)
 7                .fill(.yellow.opacity(0.3))
 8                .frame(width: 320, height: 240)
 9                .shadow(color: .black, radius: 7, x: 8, y: 10)
10            Image(animal.name)
11                .resizable()
12                .scaledToFit()
13                .frame(width: 320, height: 240)
14                .clipShape(RoundedRectangle(cornerRadius: 40))
15                .overlay(RoundedRectangle(cornerRadius: 40)
16                    .strokeBorder(Color.yellow.opacity(0.4), lineWidth: 6))
17        }
18    }
19}

Animals

 1struct Animal: Identifiable {
 2    let id = UUID()
 3    let name: String
 4    
 5    init(num: Int) {
 6        self.name = "animal-\( String(repeating: "0", count: num < 10 ? 1 : 0) )\(num)"
 7    }
 8}
 9
10
11struct Animals {
12    var animalList: [Animal]
13    
14    init() {
15        animalList = []
16        for i in 1...25 {
17            animalList.append(Animal(num: i))
18        }
19    }
20    
21}

SwiftUI view to display an image in a card view

Scroll without any transition effect

Place the animal cards in a vertical stack in a scroll view to see the default scroll behavior.

NoTransitionView

 1struct NoTransitionView: View {
 2    let animals = Animals()
 3    
 4    var body: some View {
 5        VStack {
 6            HeaderView(heading: "No Transition")
 7
 8            ScrollView {
 9                LazyVStack {
10                    ForEach (animals.animalList) { animal in
11                        AnimalCardView(animal: animal)
12                    }
13                }
14            }
15        }
16    }
17}

Vertical stack of cards scrolling without any transition

Vertical stack of cards scrolling without transition

Scale Transition

Adding a scroll transition effect is achieved by adding a scrollTransition modifier to the Animal Card View. Scale effect can be set to some value less than 1 based on the ScrollTransitionPhase identity. The isIdentity transition phase is true when the view is in full view and false when the view is no longer in view. The transition is taken care of automatically where the scale begins to change as the view is scrolled out of view.

ScaleTransitionView

 1struct ScaleTransitionView: View {
 2    let animals = Animals()
 3
 4    var body: some View {
 5        VStack {
 6            HeaderView(heading: "Scale Transition")
 7            
 8            ScrollView {
 9                LazyVStack {
10                    ForEach (animals.animalList) { animal in
11                        AnimalCardView(animal: animal)
12                            .scrollTransition { content, phase in content
13                                    .scaleEffect(phase.isIdentity ? 1 : 0.6)
14                            }
15                    }
16                }
17            }
18        }
19    }
20}

Vertical stack of cards scrolling with a scale transition

Opacity Transition

The opacity of the content can be bound to the scroll transition phase identity so that the contents fade as the view is scrolled out of view. The degree to which the view fades can be set by specifying the opacity value when the phase isIdentity is false.

OpacityTransitionView

 1struct OpacityTransitionView: View {
 2    let animals = Animals()
 3
 4    var body: some View {
 5        VStack {
 6            HeaderView(heading: "Opacity Transition")
 7
 8            ScrollView {
 9                LazyVStack {
10                    ForEach (animals.animalList) { animal in
11                        AnimalCardView(animal: animal)
12                            .scrollTransition { content, phase in 
13                                content.opacity(phase.isIdentity ? 1 : 0)
14                            }
15                    }
16                }
17            }
18        }
19    }
20}

Vertical stack of cards scrolling with a opacity transition

Offset Transition

The x and y positioning can also be bound to the scroll transition phase identity so that the contents can slide in to place as the view is scrolled. The following code adjusts the x offset so that the cards seems to slide in and out from the trailing direction.

OffsetTransitionView

 1struct OffsetTransitionView: View {
 2    let animals = Animals()
 3    
 4    var body: some View {
 5        VStack {
 6            HeaderView(heading: "Offset Transition")
 7            
 8            ScrollView {
 9                LazyVStack {
10                    ForEach (animals.animalList) { animal in
11                        AnimalCardView(animal: animal)
12                            .scrollTransition { content, phase in 
13                                content.offset(x: phase.isIdentity ? 0 : 400)
14                            }
15                    }
16                }
17            }
18        }
19    }
20}

Vertical stack of cards scrolling with a offset transition

Scale and Opacity Transition

Multiple effects can be applied at the same time as the cards scroll into view. The example in the Apple documentation is to combine scaling with opacity, which creates the effect of the views appearing from the background and fading back into the background.

ScaleOpacityView

 1struct ScaleOpacityView: View {
 2    let animals = Animals()
 3
 4    var body: some View {
 5        VStack {
 6            HeaderView(heading: "Scale & Opacity Transition")
 7
 8            ScrollView {
 9                LazyVStack {
10                    ForEach (animals.animalList) { animal in
11                        AnimalCardView(animal: animal)
12                            .scrollTransition { content, phase in 
13                                content
14                                    .scaleEffect(phase.isIdentity ? 1 : 0.3)
15                                    .opacity(phase.isIdentity ? 1 : 0.3)
16                            }
17                    }
18                }
19            }
20        }
21    }
22}

Vertical stack of cards scrolling with combined scale and opacity transition

View Aligned

The viewAligned behavior can be used so that the scrolling always stops at the edge of a leading view. This works with scrollTargetLayout modifier to layout the LazyVStack container, that contain the main repeating content, within a ScrollView .

ViewAlignedView

 1struct ViewAlignedView: View {
 2    let animals = Animals()
 3
 4    var body: some View {
 5        VStack {
 6            HeaderView(heading: "Scale & Opacity Transition")
 7            Text("viewAligned")
 8
 9            ScrollView {
10                LazyVStack {
11                    ForEach (animals.animalList) { animal in
12                        AnimalCardView(animal: animal)
13                            .scrollTransition { content, phase in
14                                content
15                                    .scaleEffect(phase.isIdentity ? 1 : 0.3)
16                                    .opacity(phase.isIdentity ? 1 : 0.3)
17                            }
18                    }
19                }
20                .scrollTargetLayout()
21            }
22            .scrollTargetBehavior(.viewAligned)
23        }
24    }
25}

Vertical stack of cards scrolling with scrollTargetBehavior set to viewAligned

Vertical stack of cards scrolling with Scale and Opacity transition

Scale, Opacity, Rotation and Offset Transition

Where to stop with the effects on scroll transitions? The following combines scaling, opacity, rotation and offset to show the cards flying in from an angle and getting bigger and clearer and then flying out in the opposite direction. I think this might be a bit too much. The scroll transition phase value is used to determine the offset. This phase value is -1.0 when the view is in the topLeading phase, zero when in the identity phase and 1.0 when in the bottomTrailing phase.

ScaleOpacityRotationView

 1struct ScaleOpacityRotationView: View {
 2    let animals = Animals()
 3
 4    var body: some View {
 5        VStack {
 6            HeaderView(heading: "Scale, Opacity,")
 7            HeaderView(heading: "Rotation and Offset")
 8
 9            ScrollView {
10                LazyVStack {
11                    ForEach (animals.animalList) { animal in
12                        AnimalCardView(animal: animal)
13                            .scrollTransition(.interactive) { content, phase in 
14                                content
15                                    .scaleEffect(phase.isIdentity ? 1.0 : 0.2)
16                                    .opacity(phase.isIdentity ? 1 : 0.5)
17                                    .rotation3DEffect(
18                                        Angle.degrees(phase.isIdentity ? 0: 90),
19                                        axis: (x: 0.5, y: 0.0, z: 0.1))
20                                    .offset(x: phase.value * -200)
21                            }
22                    }
23                }
24                .scrollTargetLayout()
25            }
26            .scrollTargetBehavior(.viewAligned)
27        }
28    }
29}

Vertical stack of cards scrolling with combined scale, opacity, rotation and offset transition

Vertical stack of cards scrolling with Scale, Opacity, 3D Rotation and Offset in scroll transition

Conclusion

Scroll transition effects were added to SwiftUI in iOS 17. This allows views behavior to be animated as they scroll into and out of view. A common effect is to add a scale and opacity change so that the views appear to fade into the background. There are a number of behaviors that can be applied to the views as they scroll into and out of view, but adding too many effects can draw too much attention to the scrolling effect. This might distract from the actual view and have the user too focussed on the scrolling behavior. Having said that, I did find that once a scroll transition has been added, then a scroll without any transition seems somewhat broken or inferior.

The source code for ScrollEffectApp is available on GitHub.

Add horizontal scroll to charts with SwiftUI Charts in iOS 16

Eric Callanan — Sunday, 04 Dec 2022

Apple introduced SwiftUI Charts at WWWDC 2022, which makes it incredibly easy to create charts within SwiftUI views. The default chart presents the entire data in the chart plot regardless of how much data is available. It can be beneficial to show more details on a chart and add the ability to scroll through the chart.

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

Create sample data

Define a data model that will generate random data for a property like body weight measured in pounds in a range between 175 and 200. The generation of the data gives minor changes each day to make the data more realistic.

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

 1struct WeightData {
 2    private(set) var allWeights: [Weight]?
 3    
 4    static let weightInitial = 180
 5    static let weightInterval = 2
 6    static let weightMin = 175
 7    static let weightMax = 200
 8
 9    init() {
10        createWeightData(days: 100)
11    }
12    
13    private mutating func createWeightData(days: Int) {
14        // Generate sample weight date between 175 and 200 pounds (+ or - 0-3 pounds daily)
15        self.allWeights = []
16        var selectedWeight = WeightData.weightInitial
17        var add = true
18        for interval in 0...days {
19            switch selectedWeight {
20            case (WeightData.weightMax - WeightData.weightInterval + 1)..<Int.max:
21                add = false
22            case 0..<(WeightData.weightMin + WeightData.weightInterval):
23                add = true
24            default:
25                add = (Int.random(in: 0...4) == 3) ? !add : add
26            }
27            
28            selectedWeight = add ? selectedWeight + Int.random(in: 0...WeightData.weightInterval) : selectedWeight - Int.random(in: 0...WeightData.weightInterval)
29            let selectedDate = Calendar.current.date(byAdding: .day, value: (-1 * interval), to: Date())!
30            self.allWeights!.append(Weight(date: selectedDate, weight: selectedWeight))
31        }
32    }
33}

Generate weight model data

Generate weight model data

Display weight data on Line Chart

Create a ViewModel to bridge between the Model and the View as discussed in MVVM in SwiftUI. A function is added to WeightViewModel to reinitialise the model with a different number of days. Buttons are added to the view to change the number of days so the graph can be changed to display the data. It can be seen that the scales on the chart adjust automatically to display all the data. This is a great feature of Swift Charts and it allows charts to be created quickly that adjust to the available space on screen. However, when there is a large number of data samples, the chart can appear a bit squashed and make it difficult to see the details.

Model

 1struct WeightData {
 2    private(set) var allWeights: [Weight]?
 3    
 4    static let weightInitial = 180
 5    static let weightInterval = 2
 6    static let weightMin = 175
 7    static let weightMax = 200
 8    
 9    mutating func createWeightData(days: Int) {
10        // Generate sample weight date between 175 and 200 pounds (+ or - 0-3 pounds daily)
11        self.allWeights = []
12        var selectedWeight = WeightData.weightInitial
13        var add = true
14        for interval in 0...days {
15            switch selectedWeight {
16            case (WeightData.weightMax - WeightData.weightInterval + 1)..<Int.max:
17                add = false
18            case 0..<(WeightData.weightMin + WeightData.weightInterval):
19                add = true
20            default:
21                add = (Int.random(in: 0...4) == 3) ? !add : add
22            }
23            
24            selectedWeight = add ? selectedWeight + Int.random(in: 0...WeightData.weightInterval) : selectedWeight - Int.random(in: 0...WeightData.weightInterval)
25            let selectedDate = Calendar.current.date(byAdding: .day, value: (-1 * interval), to: Date())!
26            self.allWeights!.append(Weight(date: selectedDate, weight: selectedWeight))
27        }
28    }
29}

ViewModel

 1class WeightViewModel: ObservableObject {
 2    @Published private var weightModel = WeightData()
 3
 4    init() {
 5        weightModel.createWeightData(days: 100)
 6    }
 7    
 8    var allWeights: [Weight]? {
 9        weightModel.allWeights
10    }
11    
12    func generateWeightData(numberOfDays: Int) {
13        weightModel.createWeightData(days: numberOfDays)
14    }
15}

View

 1struct WeightChartView1: View {
 2    @ObservedObject private var weightVm = WeightViewModel()
 3
 4    var body: some View {
 5        ZStack {
 6            Color(hue: 0.58, saturation: 0.17, brightness: 1.0)
 7                .edgesIgnoringSafeArea(.all)
 8            
 9            VStack() {
10                GroupBox ("Daily weight (pounds)") {
11                    if let weights = weightVm.allWeights {
12                        Chart {
13                            ForEach(weights) { weight in
14                                LineMark(
15                                    x: .value("Week Day", weight.day),
16                                    y: .value("Step Count", weight.pounds)
17                                )
18                                .foregroundStyle(ViewConstants.color1)
19                                .accessibilityLabel("\(weight.day.toString())")
20                                .accessibilityValue("\(weight.pounds) pounds")
21                            }
22                        }
23                        .chartYScale(domain: ViewConstants.minYScale...ViewConstants.maxYScale)
24                        .chartYAxis() {
25                            AxisMarks(position: .leading)
26                        }
27                    }
28                }
29                .groupBoxStyle(YellowGroupBoxStyle())
30                .frame(width: ViewConstants.chartWidth,  height: ViewConstants.chartHeight)
31                
32                Text("Generate Data")
33                    .font(.title2)
34                HStack {
35                    Button("10") {
36                        weightVm.generateWeightData(numberOfDays: 10)
37                    }
38                    Button("50") {
39                        weightVm.generateWeightData(numberOfDays: 50)
40                    }
41                    Button("100") {
42                        weightVm.generateWeightData(numberOfDays: 100)
43                    }
44                    Button("1000") {
45                        weightVm.generateWeightData(numberOfDays: 1000)
46                    }
47                }
48                
49                Spacer()
50            }
51            .padding()
52        }
53    }
54    
55    private struct ViewConstants {
56        static let color1 = Color(hue: 0.33, saturation: 0.81, brightness: 0.76)
57        static let minYScale = 150
58        static let maxYScale = 240
59        static let chartWidth: CGFloat = 350
60        static let chartHeight: CGFloat = 400
61    }
62}

Line chart with 1,000 data points

Line chart with 1,000 data points

Line chart with 10, 50, 100 and 1,000 data points

Line chart with 10, 50, 100 and 1,000 data points

Displaying weight data in a Bar Chart

It is relatively to change the line chart into a bar chart with the use of BarMark for each data point. It does not make sense to cut down the y-axis scale with a bar chart so the default y-axis scale is used. The bar chart looks much worse than the line chart when the individual bars cannot be seen.

 1struct WeightChartView2: View {
 2    @ObservedObject private var weightVm = WeightViewModel()
 3
 4    var body: some View {
 5        ZStack {
 6            Color(hue: 0.58, saturation: 0.17, brightness: 1.0)
 7                .edgesIgnoringSafeArea(.all)
 8            
 9            VStack() {
10                GroupBox ("Daily weight (pounds)") {
11                    if let weights = weightVm.allWeights {
12                        Chart {
13                            ForEach(weights) { weight in
14                                BarMark(
15                                    x: .value("Week Day", weight.day),
16                                    y: .value("Step Count", weight.pounds)
17                                )
18                                .foregroundStyle(ViewConstants.color1)
19                                .accessibilityLabel("\(weight.day.toString())")
20                                .accessibilityValue("\(weight.pounds) pounds")
21                            }
22                        }
23                        .chartYAxis() {
24                            AxisMarks(position: .leading)
25                        }
26                    }
27                }
28                .groupBoxStyle(YellowGroupBoxStyle())
29                .frame(width: ViewConstants.chartWidth,  height: ViewConstants.chartHeight)
30                
31                Text("Generate Data")
32                    .font(.title2)
33                HStack {
34                    Button("10") {
35                        weightVm.generateWeightData(numberOfDays: 10)
36                    }
37                    Button("50") {
38                        weightVm.generateWeightData(numberOfDays: 50)
39                    }
40                    Button("100") {
41                        weightVm.generateWeightData(numberOfDays: 100)
42                    }
43                    Button("1000") {
44                        weightVm.generateWeightData(numberOfDays: 1000)
45                    }
46                }
47                
48                Spacer()
49            }
50            .padding()
51        }
52    }
53    
54    private struct ViewConstants {
55        static let color1 = Color(hue: 0.33, saturation: 0.81, brightness: 0.76)
56        static let minYScale = 150
57        static let maxYScale = 240
58        static let chartWidth: CGFloat = 350
59        static let chartHeight: CGFloat = 400
60    }
61}

Bar chart with 1,000 data points

Bar chart with 1,000 data points

Bar chart with 10, 50, 100 and 1,000 data points

Bar chart with 10, 50, 100 and 1,000 data points

Add scroll to line chart

The solution is relatively straight forward, simply wrap the chart in a ScrollView and set the axis to horizontal. It is also necessary to set the desired width of the chart. This is set to a width for each point multiplied by the number of points in the data, so that a chart with 100 data points will be twice as wide as a chart with 50 data points. The second element that needs to be configured is the X-axis labels and gridlines, these are set using AxisMarks on chartXAxis so that name of the month is displayed for the first of each month. Some extensions are added to the Date type to easily check if a date is the first of a month and to get name of the month.

 1struct WeightChartView3: View {
 2    @ObservedObject private var weightVm = WeightViewModel()
 3
 4    var body: some View {
 5        ZStack {
 6            Color(hue: 0.58, saturation: 0.17, brightness: 1.0)
 7                .edgesIgnoringSafeArea(.all)
 8            
 9            VStack() {
10                GroupBox ("Daily weight (pounds)") {
11                    if let weights = weightVm.allWeights {
12                        ScrollView(.horizontal) {
13                            Chart {
14                                ForEach(weights) { weight in
15                                    LineMark(
16                                        x: .value("Week Day", weight.day),
17                                        y: .value("Step Count", weight.pounds)
18                                    )
19                                    .foregroundStyle(ViewConstants.color1)
20                                    .accessibilityLabel("\(weight.day.toString())")
21                                    .accessibilityValue("\(weight.pounds) pounds")
22                                }
23                            }
24                            .chartYScale(domain: ViewConstants.minYScale...ViewConstants.maxYScale)
25                            .chartYAxis() {
26                                AxisMarks(position: .leading)
27                            }
28                            .chartXAxis {
29                                AxisMarks(preset: .extended,
30                                          position: .bottom,
31                                          values: .stride (by: .day)) { value in
32                                    if value.as(Date.self)!.isFirstOfMonth() {
33                                        AxisGridLine()
34                                            .foregroundStyle(.black.opacity(0.5))
35                                        let label = "01\n\(value.as(Date.self)!.monthName())"
36                                        AxisValueLabel(label).foregroundStyle(.black)
37                                    } else {
38                                        AxisValueLabel(
39                                            format: .dateTime.day(.twoDigits)
40                                        )
41                                    }
42                                }
43                            }
44                            .frame(width: ViewConstants.dataPointWidth * CGFloat(weights.count))
45                        }
46                    }
47                }
48                .groupBoxStyle(YellowGroupBoxStyle())
49                .frame(width: ViewConstants.chartWidth,  height: ViewConstants.chartHeight)
50                
51                Text("Generate Data")
52                    .font(.title2)
53                HStack {
54                    Button("10") {
55                        weightVm.generateWeightData(numberOfDays: 10)
56                    }
57                    Button("50") {
58                        weightVm.generateWeightData(numberOfDays: 50)
59                    }
60                    Button("100") {
61                        weightVm.generateWeightData(numberOfDays: 100)
62                    }
63                    Button("1000") {
64                        weightVm.generateWeightData(numberOfDays: 1000)
65                    }
66                }
67                
68                Spacer()
69            }
70            .padding()
71        }
72    }
73    
74    private struct ViewConstants {
75        static let color1 = Color(hue: 0.33, saturation: 0.81, brightness: 0.76)
76        static let minYScale = 150
77        static let maxYScale = 240
78        static let chartWidth: CGFloat = 350
79        static let chartHeight: CGFloat = 400
80        static let dataPointWidth: CGFloat = 20
81    }
82}

Extensions on date

 1extension Date {
 2    func toString() -> String {
 3        let dateFormatter = DateFormatter()
 4        dateFormatter.dateStyle = .long
 5        dateFormatter.timeStyle = .none
 6        dateFormatter.locale = Locale(identifier: "en_US")
 7        return dateFormatter.string(from: self)
 8    }
 9    
10    func isFirstOfMonth() -> Bool {
11        let components = Calendar.current.dateComponents([.day], from: self)
12        return components.day == 1
13    }
14    
15    func monthName() -> String {
16        let dateFormatter = DateFormatter()
17        dateFormatter.dateFormat = "MMMM"
18        dateFormatter.locale = Locale(identifier: "en_US")
19        return dateFormatter.string(from: self)
20    }
21}

Line chart with horizontal scrolling to display large number of data points

Line chart with horizontal scrolling to display large number of data points

Line chart with horizontal scrolling to display large number of data points

Line chart with horizontal scrolling to display large number of data points

Add scroll to bar chart

Adding horizontal scrolling to the bar chart is similar as the line chart. The width of each bar can ve set as the width for each data point. The value for each bar is displayed as an annotation.

 1struct WeightChartView4: View {
 2    @ObservedObject private var weightVm = WeightViewModel()
 3
 4    var body: some View {
 5        ZStack {
 6            Color(hue: 0.58, saturation: 0.17, brightness: 1.0)
 7                .edgesIgnoringSafeArea(.all)
 8            
 9            VStack() {
10                GroupBox ("Daily weight (pounds)") {
11                    if let weights = weightVm.allWeights {
12                        ScrollView(.horizontal) {
13                            Chart {
14                                ForEach(weights) { weight in
15                                    BarMark(
16                                        x: .value("Week Day", weight.day),
17                                        y: .value("Step Count", weight.pounds),
18                                        width: ViewConstants.barWidth
19                                    )
20                                    .annotation(position: .top) {
21                                        Text("\(weight.pounds)").font(.footnote)
22                                    }
23                                    .foregroundStyle(ViewConstants.color1)
24                                    .accessibilityLabel("\(weight.day.toString())")
25                                    .accessibilityValue("\(weight.pounds) pounds")
26                                }
27                            }
28                            .chartYScale(domain: 0...ViewConstants.maxYScale)
29                            .chartYAxis() {
30                                AxisMarks(position: .leading)
31                            }
32                            .chartXAxis {
33                                AxisMarks(preset: .extended,
34                                          position: .bottom,
35                                          values: .stride (by: .day)) { value in
36                                    if value.as(Date.self)!.isFirstOfMonth() {
37                                        AxisGridLine()
38                                            .foregroundStyle(.black.opacity(0.5))
39                                        let label = "01\n\(value.as(Date.self)!.monthName())"
40                                        AxisValueLabel(label).foregroundStyle(.black)
41                                    } else {
42                                        AxisValueLabel(
43                                            format: .dateTime.day(.twoDigits)
44                                        )
45                                    }
46                                }
47                            }
48                            .frame(width: ViewConstants.dataPointWidth * CGFloat(weights.count))
49                        }
50                    }
51                }
52                .groupBoxStyle(YellowGroupBoxStyle())
53                .frame(width: ViewConstants.chartWidth,  height: ViewConstants.chartHeight)
54                
55                Text("Generate Data")
56                    .font(.title2)
57                HStack {
58                    Button("10") {
59                        weightVm.generateWeightData(numberOfDays: 10)
60                    }
61                    Button("50") {
62                        weightVm.generateWeightData(numberOfDays: 50)
63                    }
64                    Button("100") {
65                        weightVm.generateWeightData(numberOfDays: 100)
66                    }
67                    Button("1000") {
68                        weightVm.generateWeightData(numberOfDays: 1000)
69                    }
70                }
71                Spacer()
72            }
73            .padding()
74        }
75    }
76    
77    private struct ViewConstants {
78        static let color1 = Color(hue: 0.33, saturation: 0.81, brightness: 0.76)
79        static let minYScale = 150
80        static let maxYScale = 240
81        static let chartWidth: CGFloat = 350
82        static let chartHeight: CGFloat = 400
83        static let dataPointWidth: CGFloat = 30
84        static let barWidth: MarkDimension = 22
85    }
86}

Bar chart with horizontal scrolling to display large number of data points

Bar chart with horizontal scrolling to display large number of data points

Bar chart with horizontal scrolling to display large number of data points

Bar chart with horizontal scrolling to display large number of data points

Conclusion

The default behavior for Swift Charts is to display all the data points in the plot area of the chart. This can result in larger volumes of data being squashed and the chart difficult to interpret. One solution is to wrap the chart in a ScrollView, which requires setting the width of the chart based on the number of sample points to plot. One possible issue with the above code is that the entire chart scrolls, with the result that the y-axis scrolls off screen. It might be better to scroll the plot data but keep the y-axis visible so the scale remains visible.

The code for ScrollingChartsApp is available on GitHub.