Note: Chart is a SwiftUI view that displays a chart
import SwiftUI import Chartsstruct ContentView: View { var body: some View { Chart { // TODO add Marks } } }
Note: BarMark represents data using bars. BarMark takes x and y values, these values are PlottableValue types. PlottableValue type conforms to Plottable protocol which is a type that can serve as data for the labeled, plottable values that we can draw on a chart.
struct ContentView: View { var body: some View { VStack { Text("DevTechie.com") .font(.largeTitle) Chart { BarMark( x: .value("Day", "Mon"), y: .value("Min", 20) ) } } } }
struct ContentView: View { var body: some View { VStack { Text("DevTechie.com") .font(.largeTitle) Chart { BarMark( x: .value("Day", "Mon"), y: .value("Min", 20) ) } .frame(height: 400) } } }
struct ContentView: View { var body: some View { VStack { Text("DevTechie.com") .font(.largeTitle) Chart { BarMark( x: .value("Day", "Mon"), y: .value("Min", 20) ) BarMark( x: .value("Day", "Tue"), y: .value("Min", 65) ) BarMark( x: .value("Day", "Wed"), y: .value("Min", 45) ) } .frame(height: 400) } } }
BarMark( x: .value("Day", "Mon"), y: .value("Min", 20) )
BarMark( x: .value("Min", 20), y: .value("Day", "Mon") )
struct ContentView: View { var body: some View { VStack { Text("DevTechie.com") .font(.largeTitle) Chart { BarMark( x: .value("Min", 20), y: .value("Day", "Mon") ) BarMark( x: .value("Min", 65), y: .value("Day", "Tue") ) BarMark( x: .value("Min", 45), y: .value("Day", "Wed") ) } .frame(height: 400) } } }
struct Workout: Identifiable { var id = UUID() var day: String var minutes: Double }
extension Workout { static let workouts: [Workout] = [ Workout(day: "Mon", minutes: 32), Workout(day: "Tue", minutes: 45), Workout(day: "Wed", minutes: 56), Workout(day: "Thu", minutes: 15), Workout(day: "Fri", minutes: 65), Workout(day: "Sat", minutes: 8), Workout(day: "Sun", minutes: 10), ] }
import SwiftUI import Chartsstruct ContentView: View { var body: some View { VStack { Text("DevTechie.com") .font(.largeTitle) Chart(Workout.workouts) { workout in BarMark( x: .value("Day", workout.day), y: .value("Workout(In minutes)", workout.minutes)) } .frame(height: 400) } .padding() } }struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } }struct Workout: Identifiable { var id = UUID() var day: String var minutes: Double }extension Workout { static let workouts: [Workout] = [ Workout(day: "Mon", minutes: 32), Workout(day: "Tue", minutes: 45), Workout(day: "Wed", minutes: 56), Workout(day: "Thu", minutes: 15), Workout(day: "Fri", minutes: 65), Workout(day: "Sat", minutes: 8), Workout(day: "Sun", minutes: 10), ] }
struct ContentView: View { var body: some View { VStack { Text("DevTechie.com") .font(.largeTitle) Chart(Workout.workouts) { workout in BarMark( x: .value("Workout(In minutes)", workout.minutes), y: .value("Day", workout.day)) } .frame(height: 400) } .padding() } }
struct ContentView: View { var body: some View { VStack { Text("DevTechie.com") .font(.largeTitle) Chart(Workout.workouts) { workout in BarMark( x: .value("Workout(In minutes)", workout.minutes), y: .value("Day", workout.day)) .foregroundStyle(.pink) } .frame(height: 400) } .padding() } }
struct ContentView: View { var body: some View { VStack { Text("DevTechie.com") .font(.largeTitle) Chart(Workout.workouts) { workout in BarMark( x: .value("Workout(In minutes)", workout.minutes), y: .value("Day", workout.day)) .foregroundStyle(.linearGradient(colors: [.orange, .pink], startPoint: .leading, endPoint: .trailing)) } .frame(height: 400) } .padding() } }
struct ContentView: View { var body: some View { VStack { Text("DevTechie.com") .font(.largeTitle) Chart(Workout.workouts) { workout in BarMark( x: .value("Workout(In minutes)", workout.minutes), y: .value("Day", workout.day)) .foregroundStyle(by: .value("Day", workout.day)) } .frame(height: 400) } .padding() } }
struct ContentView: View { let markColors: [Color] = [.pink, .purple, .cyan, .brown, .orange, .blue, .mint] var body: some View { VStack { Text("DevTechie.com") .font(.largeTitle) Chart(Workout.workouts) { workout in BarMark( x: .value("Workout(In minutes)", workout.minutes), y: .value("Day", workout.day)) .foregroundStyle(by: .value("Day", workout.day)) } .chartForegroundStyleScale(domain: Workout.workouts.compactMap({ workout in workout.day }), range: markColors) .frame(height: 400) } .padding() } }
struct ContentView: View { let markColors: [LinearGradient] = [ LinearGradient(colors: [.pink, .green], startPoint: .leading, endPoint: .trailing), LinearGradient(colors: [.blue, .green], startPoint: .leading, endPoint: .trailing), LinearGradient(colors: [.orange, .green], startPoint: .leading, endPoint: .trailing), LinearGradient(colors: [.mint, .green], startPoint: .leading, endPoint: .trailing), LinearGradient(colors: [.cyan, .green], startPoint: .leading, endPoint: .trailing), LinearGradient(colors: [.purple, .green], startPoint: .leading, endPoint: .trailing), LinearGradient(colors: [.indigo, .green], startPoint: .leading, endPoint: .trailing), ] var body: some View { VStack { Text("DevTechie.com") .font(.largeTitle) Chart(Workout.workouts) { workout in BarMark( x: .value("Workout(In minutes)", workout.minutes), y: .value("Day", workout.day)) .foregroundStyle(by: .value("Day", workout.day)) } .chartForegroundStyleScale(domain: Workout.workouts.compactMap({ workout in workout.day }), range: markColors) .frame(height: 400) } .padding() } }
struct ContentView: View { let markColors: [LinearGradient] = [ LinearGradient(colors: [.pink, .green], startPoint: .leading, endPoint: .trailing), LinearGradient(colors: [.blue, .green], startPoint: .leading, endPoint: .trailing), LinearGradient(colors: [.orange, .green], startPoint: .leading, endPoint: .trailing), LinearGradient(colors: [.mint, .green], startPoint: .leading, endPoint: .trailing), LinearGradient(colors: [.cyan, .green], startPoint: .leading, endPoint: .trailing), LinearGradient(colors: [.purple, .green], startPoint: .leading, endPoint: .trailing), LinearGradient(colors: [.indigo, .green], startPoint: .leading, endPoint: .trailing), ] var body: some View { VStack { Text("DevTechie.com") .font(.largeTitle) Chart(Workout.workouts) { workout in BarMark( x: .value("Workout(In minutes)", workout.minutes), y: .value("Day", workout.day)) .foregroundStyle(by: .value("Day", workout.day)) .annotation(position: .trailing) { Image(systemName: "figure.stand") .foregroundColor(.indigo) } } .chartForegroundStyleScale(domain: Workout.workouts.compactMap({ workout in workout.day }), range: markColors) .frame(height: 400) } .padding() } }
struct Constants { static let markColors: [LinearGradient] = [ LinearGradient(colors: [.pink, .green], startPoint: .leading, endPoint: .trailing), LinearGradient(colors: [.blue, .green], startPoint: .leading, endPoint: .trailing), LinearGradient(colors: [.orange, .green], startPoint: .leading, endPoint: .trailing), LinearGradient(colors: [.mint, .green], startPoint: .leading, endPoint: .trailing), LinearGradient(colors: [.cyan, .green], startPoint: .leading, endPoint: .trailing), LinearGradient(colors: [.purple, .green], startPoint: .leading, endPoint: .trailing), LinearGradient(colors: [.indigo, .green], startPoint: .leading, endPoint: .trailing), ] }
struct AnnotationView: View { let workout: Workout var body: some View { let idx = Workout.workouts.firstIndex(where: {$0.id == workout.id}) ?? 0 return VStack(spacing: 0) { Text("\(workout.minutes.formatted()) mins") Image(systemName: "figure.stand") } .font(.caption) .foregroundStyle(Constants.markColors[idx]) } }
struct ContentView: View { var body: some View { VStack { Text("DevTechie.com") .font(.largeTitle) Chart(Workout.workouts) { workout in BarMark( x: .value("Workout(In minutes)", workout.minutes), y: .value("Day", workout.day)) .foregroundStyle(by: .value("Day", workout.day)) .annotation(position: .trailing) { AnnotationView(workout: workout) } } .chartForegroundStyleScale(domain: Workout.workouts.compactMap({ workout in workout.day }), range: Constants.markColors) .frame(height: 400) } .padding() } }
struct ContentView: View { var body: some View { VStack { Text("DevTechie.com") .font(.largeTitle) Chart(Workout.workouts) { workout in BarMark( x: .value("Day", workout.day), y: .value("Workout(In minutes)", workout.minutes)) .foregroundStyle(by: .value("Day", workout.day)) .annotation(position: .top) { AnnotationView(workout: workout) } } .chartForegroundStyleScale(domain: Workout.workouts.compactMap({ workout in workout.day }), range: Constants.markColors) .frame(height: 400) } .padding() } }
With that we have reached the end of this article. Thank you once again for reading. Subscribe to our weekly newsletter at https://www.devtechie.com