SwiftUI 3D Charts

by Annett Schwarze | 2025-09-26

To create a 3D chart use `Chart3D`. In the example a data array is passed into the Chart3D call. To create a 3D scatter plot use `PointMark`. For a surface plot use `SurfacePlot`.

The feature has been tested with macOS 26 Tahoe and Xcode 26.

        
import SwiftUI
import Charts

@available(iOS 26.0, *)
struct Sample3DChartView: View {
    struct F: Identifiable {
        let id: UUID = UUID()

        var x: Double
        var y: Double
        var z: Double
    }

    @State private var fdata: [F] = []

    var body: some View {
        Text("SwiftUI 3D Chart")
            .font(.largeTitle)
        @State var pose: Chart3DPose = .default

        VStack(spacing: 24) {
            VStack {
                Chart3D(fdata) { rec in
                    PointMark(
                        x: .value("x", rec.x),
                        y: .value("y", rec.y),
                        z: .value("z", rec.z))
                    .foregroundStyle(Color.green)
                }
                .chartXScale(domain: -1...1, range: -0.5...0.5)
                .chartZScale(domain: -1...1, range: -0.5...0.5)
                .chartYScale(domain: 0...100, range: -0.5...0.5)
            }
            .background {
                Color.white
            }
            .clipShape(RoundedRectangle(cornerRadius: 16))

            VStack {
                Chart3D {
                    SurfacePlot(x: "X", y: "Y", z: "Z") { x, z in
                        let v = x - z
                        return sin(v)

                    }
                    .foregroundStyle(LinearGradient(colors: [
                        .purple,
                        .indigo,
                        .blue,
                        .green,
                        .yellow,
                        .orange,
                        .red,
                    ], startPoint: .bottomTrailing, endPoint: .topLeading))
                }
                .chartXScale(domain: -5...5, range: -0.5...0.5)
                .chartZScale(domain: -5...5, range: -0.5...0.5)
                .chartYScale(domain: -3...3, range: -0.5...0.5)
            }
            .background {
                Color.white
            }
            .clipShape(RoundedRectangle(cornerRadius: 16))
        }
        .padding(24)
        .background {
            Color(white: 0.9)
                .edgesIgnoringSafeArea(.all)
        }
        .task {
            loadData()
        }
    }

    private func loadData() {
        let count = 100
        fdata = Array(0 ... count).map({ i in
            let phi = 2.0 * .pi * Double(i) / Double(count) * 2
            let h = Double(i)
            let dim = 1.0
            let f = F(
                x: dim * sin(phi),
                y: h,
                z: dim * cos(phi))
            return f
        })
    }
}

@available(iOS 26.0, *)
#Preview {
    Sample3DChartView()
}