Using .glassEffect in Charts

Hi @antonmedstorta

Am I missing anything? Maybe it's just not advisable or necessary to use glass effects within Charts?

Adopting Liquid Glass goes over some best practices for Liquid Glass effects.

However, it seems it's not available directly on the BarMark (ChartContent) type, and I'm having trouble adding it in other ways too, such as using in on the types I supply to modifiers like foregroundStyle or clipShape.

Please file an enhancement request and include your use case. Post the FB number here once you file the request.

Generally speaking, Liquid Glass is not a part of Swift Charts. For recommendations about using Liquid Glass I suggest reviewing the WWDC25 sessions about Liquid Glass. They discuss many considerations about how and where to employ the new Liquid Glass GUI features.

Adopting Liquid Glass goes over some best practices for Liquid Glass effects. Please file an enhancement request and include your use case. Post the FB number here once you file the request.

Thanks! I have watched the session, and I'll have a think about if over the next couple of weeks. If it feels like it makes sense I'll make sure to file an enhancement request. Still figuring out where to best take advantage of .glassEffect.

Generally speaking, Liquid Glass is not a part of Swift Charts.

Thank you very much for the clarification! I suspected that would be the case, but still wanted to double check.

Hello! I was able to get a couple of patterns down for glass in charts; some through views and others with chart-specific protocols.

here's an example .annotation:

extension Charting.Views.Stock.Selection {
    struct Annotation: View {
        private let low: Double
        private let high: Double
        private let open: Double
        private let close: Double
        private let gain: Bool

        private var time: String

        public init(_ data: Charting.Model.Candle) {
            self.low = data.low
            self.high = data.high
            self.open = data.open
            self.close = data.close
            self.gain = data.gain

            self.time = data.date.formatted(.dateTime.hour().minute().timeZone(.exemplarLocation))
        }

        @Environment(\.colorScheme) private var colors

        var body: some View {
            VStack(alignment: .leading) {
                Group {
                    HStack {
                        Text("Low").font(.caption)
                        Spacer()

                        Text(low, format: .currency(code: "USD"))
                    }

                    HStack {
                        Text("High").font(.caption)
                        Spacer()
                        Text(high, format: .currency(code: "USD"))

                    }

                    Divider()

                    HStack {
                        Text("Open").font(.caption)
                        Spacer()
                        Text(open, format: .currency(code: "USD"))

                    }

                    HStack {
                        Text("Close").font(.caption)
                        Spacer()
                        Text(close, format: .currency(code: "USD"))

                    }

                    HStack {
                        Spacer()
                        Text(gain ? "+" : "-")
                        Text(abs(open - close), format: .currency(code: "USD"))

                    }

                    Divider()

                    HStack {
                        Spacer()
                        Text(time)
                    }
                }
                .foregroundStyle(colors == .dark ? Color.white : Color.black)
            }
            .padding()
            .glassEffect(
                .regular.tint(
                    gain
                        ? Color("Chart-Candle-Green").opacity(0.25)
                        : Color("Chart-Candle-Red").opacity(0.25)
                ),
                in: RoundedRectangle(cornerRadius: 8, style: .circular)
            )
            .background(
                RoundedRectangle(cornerRadius: 8, style: .circular)
                    .fill(
                        .ultraThinMaterial.opacity(0.25)
                    )
            )
            .opacity(0.25)
        }

    }
}

Liquid glass should mainly be used on UI control elements that sit above the content. Also, currently, there's no dedicated support for liquid glass effects in Charts.

It's a good idea to file enhancement requests with design justification and mock-ups.