swiftui-charts-3d

3D Charts with Swift Charts

Create 3D data visualizations using Chart3D and SurfacePlot. Covers math-driven surfaces, data-driven surfaces, interactive camera pose control, surface styling, and camera projection modes.

When This Skill Activates

Use this skill when the user:

• Wants to create a 3D chart or 3D data visualization
• Asks about Chart3D, SurfacePlot, or 3D surface plots
• Needs to visualize a mathematical function as a 3D surface
• Wants interactive drag-to-rotate on a 3D chart
• Asks about 3D chart camera angles, pose, or projection
• Needs to style 3D surfaces with gradients or height-based coloring
• Wants to render multiple surfaces in a single 3D chart

API Availability

API	Minimum Version	Notes
Chart3D	iOS 26 / macOS 26	Main 3D chart container
SurfacePlot	iOS 26 / macOS 26	3D surface mark
Chart3DPose	iOS 26 / macOS 26	Viewing angle control
Chart3DCameraProjection	iOS 26 / macOS 26	.automatic, .perspective, .orthographic
Chart3DSurfaceStyle	iOS 26 / macOS 26	.heightBased, .normalBased

Quick Start

Math-Driven Surface

import SwiftUI
import Charts

struct WaveSurfaceView: View {
    var body: some View {
        Chart3D {
            SurfacePlot(
                x: "X",
                y: "Height",
                z: "Z",
                function: { x, z in
                    sin(x) * cos(z)
                }
            )
            .foregroundStyle(.blue)
        }
    }
}

Data-Driven Surface

struct DataPoint: Identifiable {
    let id = UUID()
    let x: Double
    let y: Double
    let z: Double
}

struct DataSurfaceView: View {
    let points: [DataPoint]

    var body: some View {
        Chart3D(points) { point in
            SurfacePlot(
                x: .value("X", point.x),
                y: .value("Height", point.y),
                z: .value("Z", point.z)
            )
        }
    }
}