Creating Bar Charts in SwiftUI
Bar Charts, segment, animation, capsule and picker view in SwiftUI
SwiftUI is an innovative, exceptionally simple way to build user interfaces across all Apple platforms with the power of Swift. Build user interfaces for any Apple device using just one set of tools and APIs.
SwiftUI uses a declarative syntax so you can simply state what your user interface should do. Your first line of SwiftUI code is already the most powerful UI code you’ve ever written.
The aim of this piece is to build bar charts with SwiftUI. We’ll be using a segmented picker view to bind the different bar-chart shapes.
If you are preparing for your technical coding interview or you want to learn recursion to improve your problem-solving skills then you should definitely check this free udemy course Master the Recursion from Beginner to Advance Level
If you want to learn ARKit 3 from beginner to expert level then click here to get the course and also you will get 97% discount.
If you are passionate about learning mobile development for iOS and looking to take your iOS development skills to the next level, Core Data with CloudKit framework should be at the top of your list. Click here to get the course and also you will get 97% discount.
Learn SwiftUI from Scratch click here to get the course because in this course we are going to build many apps using SwiftUI such as Facebook clone, News app, Notes app and much more.
Getting Started
Open up Xcode and create a new Xcode project. Choose Single View App in the iOS template section and click Next.
Enter your product name, and select SwiftUI as the user interface. Click Next, and create it on your desktop.
Here’s what you see once you are done with the setup.
By default, SwiftUI view files declare two structures. The first structure conforms to the View protocol and describes the view’s content and layout. The second structure declares a preview for that view.
Implementation
First press Command+N to create a new SwiftUI View file. Call the file BarView, and paste the following code in the BarView.
struct BarView: View {var value: CGFloat = 0
var week: String = ""var body: some View {VStack {ZStack(alignment: .bottom) {Capsule().frame(width: 30, height: value).foregroundColor(Color( colorLiteral(red: 0.6666070223, green: 0.6667048931, blue: 0.6665855646, alpha: 1)))Capsule().frame(width: 30, height: value)
.foregroundColor(Color(.white))Capsule().frame(width: 30, height: value)
.foregroundColor(Color(.white))Capsule().frame(width: 20, height: value)
.foregroundColor(Color(.white))Capsule().frame(width: 20, height: value)
.foregroundColor(Color(.white)) }Text(week) }
}
}struct BarView_Previews: PreviewProvider {static var previews: some View {BarView() }
}
First, what is a state property wrapper?
SwiftUI uses the @State property wrapper to allow us to modify values inside a struct, which would normally not be allowed because structs are value types. When we put @State before a property, we effectively move its storage out from our struct and into shared storage managed by SwiftUI.
In the above code, we have two variables: value and week. The first variable tracks the height of the Capsule(), and the second one shows the week.
We then built a VStack to add a view in a vertical line. Then, we have one ZStack — a view that overlays its children, aligning them in both axes. Inside the ZStack, we have five capsules (a Capsule() is a struct that’s shape aligned inside the frame of the view containing it) to show the bar chart. You can also use FOREach loop for the Capsules i am using to make it all clear.
Go back to your contentview .swift file, and paste the following code.
struct ContentView: View {@State private var pickerSelectedItem = 0
@State private var dataPoints: [[CGFloat]] = [[100, 120, 150],
[150, 100, 120],
[120, 150, 100],
[120, 100, 150],
[130, 50, 100]
]var body: some View {ZStack {Color(.orange).edgesIgnoringSafeArea(.all)VStack {Text("BAR CHART").font(.system(size: 28))
.fontWeight(.medium)
.foregroundColor(Color(.white))Picker(selection: $pickerSelectedItem, label: Text("")) {Text("Weekly").tag(0)
Text("Monthly").tag(1)
Text("Yearly").tag(2)
Text("Leap Year").tag(3)
Text("Weekend").tag(4)}.pickerStyle(SegmentedPickerStyle())
.padding(.horizontal, 24)HStack(spacing: 8) {BarView(value: dataPoints[pickerSelectedItem][0], week: "D")
BarView(value: dataPoints[pickerSelectedItem][1], week: "D")
BarView(value: dataPoints[pickerSelectedItem][2], week: "D")
BarView(value: dataPoints[pickerSelectedItem][2], week: "D")
BarView(value: dataPoints[pickerSelectedItem][2], week: "D")}.padding(.top, 24)
.animation(.default) }
}
}
}struct ContentView_Previews: PreviewProvider {static var previews: some View {ContentView() }
}
In the above code, we have two @State variables: pickerSelectedItem and dataPoints. Using these variables, we’re tweaking our bar chart.
We then build a ZStack inside the ZStack where we have a VStack. In the VStack, we have set up the Text, Picker, BarView, and some default animation on the BarView.
Build and Run
Conclusion
That’s it for this piece. I hope you enjoyed this piece and you have learned how to build animated bar charts in SwiftUI.
SwiftUI is here to stay!
If you are preparing for your technical coding interview or you want to learn recursion to improve your problem-solving skills then you should definitely check this free udemy course Master the Recursion from Beginner to Advance Level
Additional Resources
If you want to learn ARKit 3 from beginner to expert level then click here to get the course and also you will get 97% discount.
If you are passionate about learning mobile development for iOS and looking to take your iOS development skills to the next level, Core Data with CloudKit framework should be at the top of your list. Click here to get the course and also you will get 97% discount.
Learn SwiftUI from Scratch click here to get the course because in this course we are going to build many apps using SwiftUI such as Facebook clone, News app, Notes app and much more.
