Hi,
I'm currently wrestling with the .chartXScale(domain:) modifier in order to get my Chart to display correctly. The basics of the Chart look like this.
Chart(measurements, id: \.timestamp) { measurement in
if let total = measurement.production?.total {
BarMark(
x: .value(
"Timestamp",
measurement.timestamp,
unit: .weekOfYear,
calendar: .current
),
y: .value(
"Solar production",
total
)
)
}
}
As anyone familiar with Charts can see, I sort data into columns based on what week of the year the measurements belong to. Some of them can be null, and when they are, I still want space in the Chart where a BarMark would've been to be taken up, like week number 4 in this example chart (in which I've defaulted all measurements that are null in week 4 to 0, for demonstration purposes):
To achieve that, as I understand, I'm meant to use the .chartXScale(domain:) modifier, but when I apply the following modifier...
.chartXScale(domain: firstDayOfMonth...firstDayOfNextMonth)
... (where the domain is from the first day of the month to the first day of the next month), to the code above, I end up with this weird half step when the last week of measurements are all null:
For reference, here's how the domain dates are set in my minimum reproducible example:
firstDayOfMonth = Calendar.current.date(from: Calendar.current.dateComponents([.year, .month], from: .now))!
firstDayOfNextMonth = Calendar.current.date(byAdding: .month, value: 1, to: firstDayOfMonth)!
Am I misusing this modifier somehow, or is this a bug? Would love some help figuring this out, thanks!
Post
Replies
Boosts
Views
Activity
Hi,
I'm having some trouble when animating my chart with a custom AxisValueLabel. Specifically, as soon as I set its init parameter centered to true, the x axis' leftmost value of the previous dataset sticks around during the animation to the next dataset.
Here's a GIF of a screen recording from a minimum reproducible example I built. Keep a close eye on the x axis of the third BarMark, and notice how the 0 from the first BarMark sticks around longer than necessary / intended. While it isn't visible in the GIF, the extra 0 eventually does disappear, but only after the transition if fully complete, making the animation feel distracting and amateur-ish, rather than smooth.
This is my code for the x axis. If I turn centered to false, this problem immediately goes away.
.chartXAxis {
AxisMarks(
preset: .aligned,
values: .stride(
by: .day,
count: 1,
calendar: .current
)
) { value in
AxisValueLabel(centered: true) {
Text("\(value.index)")
}
}
}
As you might be able to tell, my x axis is date based, and I'm working on showing one BarMark per day of the week.
I have a ZIP of my minimum reproducible example that I can provide for anyone interested, although I don't know how to share it here.
Any advice on what I can do to fix this?