The code below draws a RuleMark
at the top and bottom of the area I would like to highlight, however, instead of 2 lines I would like to shade this area grey to show the normal range. How can I do this?
import SwiftUI
import Charts
struct ContentView: View {
struct StepCount: Identifiable {
let id = UUID()
let weekday: Date
let steps: Int
init(day: String, steps: Int) {
let formatter = DateFormatter()
formatter.dateFormat = "yyyyMMdd"
self.weekday = formatter.date(from: day) ?? Date.distantPast
self.steps = steps
}
}
let currentWeek: [StepCount] = [
StepCount(day: "20220717", steps: 4200),
StepCount(day: "20220718", steps: 15000),
StepCount(day: "20220719", steps: 2800),
StepCount(day: "20220720", steps: 10800),
StepCount(day: "20220721", steps: 12370),
StepCount(day: "20220722", steps: 9500),
StepCount(day: "20220723", steps: 3700)
]
var body: some View {
VStack {
Chart {
ForEach(currentWeek) {
LineMark(
x: .value("Week Day", $0.weekday, unit: .day),
y: .value("Step Count", $0.steps)
)
}
RuleMark(y: .value("Max of Range", 10000))
.foregroundStyle(.red)
RuleMark(y: .value("Min of Range", 6000))
.foregroundStyle(.red)
}
}
.frame(height: 200)
.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}[![enter image description here][1]][1]
2
Answers
You can use
AreaMark
orRectangleMark
. Here is an example with AreaMark:If the area should span the entire chart (especially with date values) you can use
RectangeMark
like this: