/xcode-26

Using 3D Charts with Swift Charts

Overview

Swift Charts provides powerful 3D visualization capabilities through the Chart3D component, allowing developers to create immersive three-dimensional data visualizations. This guide covers how to create, customize, and interact with 3D charts in SwiftUI applications using the Swift Charts framework.

Key components for 3D charts include:

• Chart3D: The main container view for 3D chart content
• SurfacePlot: For visualizing 3D surface data
• Chart3DPose: For controlling the viewing angle and perspective
• Chart3DSurfaceStyle: For styling the appearance of 3D surfaces

Basic Setup

Importing Required Frameworks

import SwiftUI
import Charts

Creating a Simple 3D Chart

The most basic 3D chart can be created using a mathematical function that maps x,y coordinates to z values:

struct Basic3DChartView: View {
    var body: some View {
        Chart3D {
            SurfacePlot(
                x: "X Axis",
                y: "Y Axis",
                z: "Z Axis",
                function: { x, y in
                    // Simple mathematical function: z = sin(x) * cos(y)
                    sin(x) * cos(y)
                }
            )
        }
    }
}

Creating a 3D Chart from Data

You can also create 3D charts from collections of data:

struct DataPoint3D: Identifiable {
    var x: Double
    var y: Double
    var z: Double
    var id = UUID()
}

struct Data3DChartView: View {
    let dataPoints: [DataPoint3D] = [
        // Your 3D data points
    ]
    
    var body: some View {
        Chart3D(dataPoints) { point in
            // Create appropriate 3D visualization for each point
        }
    }
}

Customizing 3D Charts

Setting the Chart Pose (Viewing Angle)

Control the viewing angle of your 3D chart using Chart3DPose:

struct CustomPose3DChartView: View {
    // Create a state variable to store the pose
    @State private var chartPose: Chart3DPose = .default
    
    var body: some View {
        Chart3D {
            SurfacePlot(
                x: "X Axis",
                y: "Y Axis",
                z: "Z Axis",
                function: { x, y in
                    sin(x) * cos(y)
                }
            )
        }
        // Apply the pose to the chart
        .chart3DPose(chartPose)
    }
}

You can use predefined poses:

• .default: The default viewing angle
• .front: View from the front
• .back: View from the back
• .top: View from the top
• .bottom: View from the bottom
• .right: View from the right side
• .left: View from the left side

Or create a custom pose with specific azimuth and inclination angles:

Chart3DPose(azimuth: .degrees(45), inclination: .degrees(30))

Interactive Pose Control

Allow users to interact with the chart by binding the pose to a state variable:

struct Interactive3DChartView: View {
    @State private var chartPose: Chart3DPose = .default
    
    var body: some View {
        Chart3D {
            SurfacePlot(
                x: "X Axis",
                y: "Y Axis",
                z: "Z Axis",
                function: { x, y in
                    sin(x) * cos(y)
                }
            )
        }
        // Bind the pose to enable interactive rotation
        .chart3DPose($chartPose)
    }
}

Setting the Camera Projection

Control the camera projection of the points in a 3D chart using Chart3DCameraProjection:

struct CustomProjection3DChartView: View {
    // Create a state variable to store the pose
    @State private var cameraProjection: Chart3DCameraProjection = .perspective
    
    var body: some View {
        Chart3D {
            SurfacePlot(
                x: "X Axis",
                y: "Y Axis",
                z: "Z Axis",
                function: { x, y in
                    sin(x) * cos(y)
                }
            )
        }
        // Apply the camera projection to the chart
        .chart3DCameraProjection(cameraProjection)
    }
}

You can use the following camera projection styles:

• .automatic: Automatically determines the camera projection
• .orthographic: Objects maintain size regardless of depth
• .perspective: Objects appear smaller with distance

Working with Surface Plots

Basic Surface Plot

SurfacePlot(
    x: "X Axis",
    y: "Y Axis",
    z: "Z Axis",
    function: { x, y in
        // Mathematical function defining the surface
        sin(sqrt(x*x + y*y))
    }
)

Styling Surface Plots

Apply different styles to your surface plots:

SurfacePlot(
    x: "X Axis",
    y: "Y Axis",
    z: "Z Axis",
    function: { x, y in
        sin(x) * cos(y)
    }
)
.foregroundStyle(Color.blue)

Available surface styles:

• .heightBased: Colors the surface based on the height (y-value)
• .normalBased: Colors the surface based on the surface normal direction

Custom Gradient Surface Style

Create a custom gradient for your surface:

let customGradient = Gradient(colors: [.blue, .purple, .red])

SurfacePlot(
    x: "X Axis",
    y: "Y Axis",
    z: "Z Axis",
    function: { x, y in
        sin(x) * cos(y)
    }
)
.foregroundStyle(LinearGradient(gradient: customGradient, startPoint: .topLeading, endPoint: .bottomTrailing))

Controlling Surface Roughness

Adjust the roughness of the surface:

SurfacePlot(
    x: "X Axis",
    y: "Y Axis",
    z: "Z Axis",
    function: { x, y in
        sin(x) * cos(y)
    }
)
.roughness(0.3) // 0 is smooth, 1 is completely rough

Advanced Techniques

Combining Multiple Surface Plots

Chart3D {
    // First surface plot
    SurfacePlot(
        x: "X",
        y: "Y",
        z: "Z",
        function: { x, y in
            sin(x) * cos(y)
        }
    )
    
    // Second surface plot
    SurfacePlot(
        x: "X",
        y: "Y",
        z: "Z",
        function: { x, y in
            cos(x) * sin(y) + 2 // Offset to avoid overlap
        }
    )
}

Specifying Y-Range for Height-Based Styling

Control the color mapping by specifying the y-range:

SurfacePlot(
    x: "X Axis",
    y: "Y Axis",
    z: "Z Axis",
    function: { x, y in
        sin(x) * cos(y)
    }
)
.foregroundStyle(Chart3DSurfaceStyle.heightBased(yRange: -1.0...1.0))

Custom Gradient with Y-Range

let customGradient = Gradient(colors: [.blue, .green, .yellow, .red])

SurfacePlot(
    x: "X Axis",
    y: "Y Axis",
    z: "Z Axis",
    function: { x, y in
        sin(x) * cos(y)
    }
)
.foregroundStyle(Chart3DSurfaceStyle.heightBased(customGradient, yRange: -1.0...1.0))

Complete Example: Interactive 3D Visualization

Here's a complete example that demonstrates an interactive 3D chart with customized styling:

import SwiftUI
import Charts

struct Interactive3DSurfaceView: View {
    // State for interactive rotation
    @State private var chartPose: Chart3DPose = .default
    
    // Custom gradient for surface coloring
    let surfaceGradient = Gradient(colors: [
        .blue,
        .cyan,
        .green,
        .yellow,
        .orange,
        .red
    ])
    
    var body: some View {
        VStack {
            Text("Interactive 3D Surface Visualization")
                .font(.headline)
            
            Chart3D {
                SurfacePlot(
                    x: "X Value",
                    y: "Y Value",
                    z: "Result",
                    function: { x, y in
                        // Interesting mathematical function
                        sin(sqrt(x*x + y*y)) / sqrt(x*x + y*y + 0.1)
                    }
                )
                .roughness(0.2)
            }
            .chart3DPose($chartPose)
            .frame(height: 400)
            
            Text("Drag to rotate the visualization")
                .font(.caption)
                .foregroundColor(.secondary)
            
            HStack {
                Button("Front View") {
                    withAnimation {
                        chartPose = .front
                    }
                }
                
                Button("Top View") {
                    withAnimation {
                        chartPose = .top
                    }
                }
                
                Button("Default View") {
                    withAnimation {
                        chartPose = .default
                    }
                }
            }
            .buttonStyle(.bordered)
        }
        .padding()
    }
}

References

• Apple Developer Documentation: Chart3D
• Apple Developer Documentation: SurfacePlot
• Apple Developer Documentation: Chart3DPose
• Apple Developer Documentation: Chart3DSurfaceStyle
• Apple Developer Documentation: Creating a chart using Swift Charts