Skip to content

Instantly share code, notes, and snippets.

@atrinh0
Created June 18, 2022 15:01
Show Gist options
  • Save atrinh0/69311243ca19a173d054046334a11e69 to your computer and use it in GitHub Desktop.
Save atrinh0/69311243ca19a173d054046334a11e69 to your computer and use it in GitHub Desktop.
Swift Chart - Foreground style negative opacity glitch
import SwiftUI
import Charts
@available(iOS 16.0, *)
struct ContentView: View {
@State private var opacity = -0.5
var body: some View {
VStack {
Chart(SalesData.last30Days, id: \.day) {
AreaMark(
x: .value("Date", $0.day),
y: .value("Sales", $0.sales)
)
.foregroundStyle(Gradient(colors: [.blue, .blue.opacity(opacity)]))
.interpolationMethod(.cardinal)
}
.frame(height: 350)
Spacer()
Rectangle()
.foregroundStyle(Gradient(colors: [.blue, .blue.opacity(opacity)]))
.frame(height: 350)
Spacer()
Text("Opacity: \(opacity)")
Slider(value: $opacity, in: -5...5)
}
}
}
func date(year: Int, month: Int, day: Int = 1, hour: Int = 0, minutes: Int = 0, seconds: Int = 0) -> Date {
Calendar.current.date(from: DateComponents(year: year, month: month, day: day, hour: hour, minute: minutes, second: seconds)) ?? Date()
}
enum SalesData {
static let last30Days = [
(day: date(year: 2022, month: 5, day: 8), sales: 168),
(day: date(year: 2022, month: 5, day: 9), sales: 117),
(day: date(year: 2022, month: 5, day: 10), sales: 106),
(day: date(year: 2022, month: 5, day: 11), sales: 119),
(day: date(year: 2022, month: 5, day: 12), sales: 109),
(day: date(year: 2022, month: 5, day: 13), sales: 104),
(day: date(year: 2022, month: 5, day: 14), sales: 196),
(day: date(year: 2022, month: 5, day: 15), sales: 172),
(day: date(year: 2022, month: 5, day: 16), sales: 122),
(day: date(year: 2022, month: 5, day: 17), sales: 115),
(day: date(year: 2022, month: 5, day: 18), sales: 138),
(day: date(year: 2022, month: 5, day: 19), sales: 110),
(day: date(year: 2022, month: 5, day: 20), sales: 106),
(day: date(year: 2022, month: 5, day: 21), sales: 187),
(day: date(year: 2022, month: 5, day: 22), sales: 187),
(day: date(year: 2022, month: 5, day: 23), sales: 119),
(day: date(year: 2022, month: 5, day: 24), sales: 160),
(day: date(year: 2022, month: 5, day: 25), sales: 144),
(day: date(year: 2022, month: 5, day: 26), sales: 152),
(day: date(year: 2022, month: 5, day: 27), sales: 148),
(day: date(year: 2022, month: 5, day: 28), sales: 240),
(day: date(year: 2022, month: 5, day: 29), sales: 242),
(day: date(year: 2022, month: 5, day: 30), sales: 173),
(day: date(year: 2022, month: 5, day: 31), sales: 143),
(day: date(year: 2022, month: 6, day: 1), sales: 137),
(day: date(year: 2022, month: 6, day: 2), sales: 123),
(day: date(year: 2022, month: 6, day: 3), sales: 146),
(day: date(year: 2022, month: 6, day: 4), sales: 214),
(day: date(year: 2022, month: 6, day: 5), sales: 250),
(day: date(year: 2022, month: 6, day: 6), sales: 146)
]
}
@atrinh0
Copy link
Author

atrinh0 commented Jul 20, 2022

Resolved in Xcode 14, beta 3.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment