Skills
skills/syncfusion/wpf-ui-components-skills/syncfusion-wpf-surface-chart

syncfusion-wpf-surface-chart

SKILL.md

Implementing Syncfusion WPF Surface Chart

The SfSurfaceChart is a three-dimensional surface that connects a set of data points.

When to Use This Skill

Use this skill when the user needs to:

  • Visualize three-dimensional data with X, Y, and Z coordinates
  • Create 3D surface plots for mathematical functions or scientific data
  • Display topographical or elevation maps
  • Show contour plots or wireframe visualizations
  • Implement interactive 3D charts with rotation and zooming
  • Render heat maps with color-coded values
  • Visualize relationships between three variables
  • Create mesh or grid-based 3D visualizations

The Syncfusion WPF Surface Chart (SfSurfaceChart) is specifically designed for rendering three-dimensional data in a grid format, supporting multiple visualization types including standard surfaces, wireframes, and contour views.

Component Overview

SfSurfaceChart is a powerful 3D visualization control that displays data points in three-dimensional space. It connects data points to create a continuous surface, making it ideal for exploring relationships between three variables.

Key Capabilities:

  • Four surface types: Surface, WireframeSurface, Contour, WireframeContour
  • Multiple data binding methods (ItemsSource or direct data points)
  • Three customizable axes (X, Y, Z)
  • Color bars for value representation
  • Predefined and custom color palettes
  • Interactive rotation, tilting, and zooming
  • Perspective and orthographic camera projections
  • Gradient and solid color rendering

Visual Elements:

  • Surface Header - Title of the chart
  • Wall - Bounding walls around the chart (left, bottom, back)
  • Major Gridlines - Axis gridlines
  • Color Bar - Value range indicator with color mapping
  • Axis Labels - Labels for X, Y, Z axes
  • Axis Headers - Headers for each axis

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

  • Assembly reference and installation
  • Visual structure of surface chart elements
  • Creating surface chart from XAML
  • Creating surface chart from code-behind
  • Basic initialization and setup
  • Adding headers, axes, and color bars
  • Complete working examples
  • Theme support and customization

Surface Types

📄 Read: references/surface-types.md

  • Overview of 4 surface type options
  • Surface - Standard 3D surface visualization
  • WireframeSurface - Mesh/wireframe rendering
  • Contour - Top-down 2D contour view
  • WireframeContour - Mesh contour visualization
  • Choosing the right type for your data
  • Type property configuration
  • Visual comparisons and use cases

Data Binding

📄 Read: references/data-binding.md

  • Data structure requirements (grid format)
  • Using ItemsSource property with collections
  • XBindingPath, YBindingPath, ZBindingPath mapping
  • RowSize and ColumnSize configuration
  • Direct data input via Data.AddPoints method
  • Creating data models and ViewModels
  • Binding in XAML vs code-behind
  • Performance considerations

Axes Configuration

📄 Read: references/axes-configuration.md

  • X, Y, and Z axis setup
  • Default vs explicit axis definitions
  • Header and HeaderTemplate customization
  • LabelTemplate and LabelFormat options
  • Minimum and Maximum range settings
  • Interval and tick configuration
  • GridLines customization (stroke, thickness)
  • EdgeLabelsDrawingMode options
  • RangePadding settings
  • Complete axis styling examples

Surface Area Customization

📄 Read: references/surface-area.md

  • Surface area properties overview
  • Rotation and Rotate property
  • Tilt property for viewing angle
  • EnableRotation for interactivity
  • CameraProjection (Perspective/Orthographic)
  • Header and title customization
  • Wall brushes (LeftWallBrush, BottomWallBrush, BackWallBrush)
  • WallThickness configuration
  • Wireframe stroke and thickness
  • ShowContourLine option
  • BrushCount for color gradients
  • ApplyGradientBrush setting

Color Bar Configuration

📄 Read: references/color-bar.md

  • ColorBar purpose and value representation
  • DockPosition property (Left, Right, Top, Bottom)
  • ShowLabel property for value display
  • Adding and configuring color bars
  • Integration with palettes
  • XAML and code-behind setup

Palettes and Colors

📄 Read: references/palettes.md

  • Palette overview and purpose
  • 12 predefined palettes (Metro, AutumnBrights, FloraHues, Pineapple, etc.)
  • Applying predefined palettes via Palette property
  • Creating custom palettes with ChartColorModel
  • CustomBrushes collection
  • Gradient vs solid color rendering
  • Visual palette examples

User Interactions

📄 Read: references/user-interactions.md

  • Zooming capabilities and EnableZooming
  • ZoomLevel property for programmatic zoom
  • Pinch zooming support
  • Rotation with EnableRotation
  • Rotate property for programmatic rotation
  • Tilt property for viewing angle
  • Interactive vs programmatic control
  • Combining rotation, tilt, and zoom

Troubleshooting

📄 Read: references/troubleshooting.md

  • Common issues and solutions
  • Data not displaying correctly
  • RowSize and ColumnSize mismatches
  • Axis range and scaling problems
  • Performance optimization tips
  • Color bar visibility issues
  • Wireframe rendering problems
  • Assembly reference errors

Quick Start Example

Basic Surface Chart in XAML

<Window xmlns:chart="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF">
    <Grid>
        <chart:SfSurfaceChart Type="Surface" 
                             ItemsSource="{Binding DataValues}"
                             XBindingPath="X" 
                             YBindingPath="Y" 
                             ZBindingPath="Z"
                             RowSize="{Binding RowSize}"
                             ColumnSize="{Binding ColumnSize}"
                             Header="3D Surface Chart"
                             Rotate="30" 
                             Tilt="15">
            
            <!-- X Axis -->
            <chart:SfSurfaceChart.XAxis>
                <chart:SurfaceAxis Header="X-Axis" />
            </chart:SfSurfaceChart.XAxis>
            
            <!-- Y Axis -->
            <chart:SfSurfaceChart.YAxis>
                <chart:SurfaceAxis Header="Y-Axis" LabelFormat="0.0" />
            </chart:SfSurfaceChart.YAxis>
            
            <!-- Z Axis -->
            <chart:SfSurfaceChart.ZAxis>
                <chart:SurfaceAxis Header="Z-Axis" />
            </chart:SfSurfaceChart.ZAxis>
            
            <!-- Color Bar -->
            <chart:SfSurfaceChart.ColorBar>
                <chart:ChartColorBar DockPosition="Right" ShowLabel="True" />
            </chart:SfSurfaceChart.ColorBar>
        </chart:SfSurfaceChart>
    </Grid>
</Window>

Data Model and ViewModel

// Data Model
public class Data
{
    public double X { get; set; }
    public double Y { get; set; }
    public double Z { get; set; }
}

// ViewModel
public class ViewModel
{
    public ObservableCollection<Data> DataValues { get; set; }
    public int RowSize { get; set; }
    public int ColumnSize { get; set; }
    
    public ViewModel()
    {
        DataValues = new ObservableCollection<Data>();
        
        // Generate sample data for mathematical surface
        double inc = 8.0 / 35;
        for (double x = -4; x < 4; x += inc)
        {
            for (double z = -4; z < 4; z += inc)
            {
                double y = 2 * (x * x) + 2 * (z * z) - 4;
                DataValues.Add(new Data() { X = x, Y = y, Z = z });
            }
        }
        
        RowSize = 35;
        ColumnSize = 35;
    }
}

Basic Surface Chart in Code-Behind

using Syncfusion.UI.Xaml.Charts;

// Create surface chart
SfSurfaceChart chart = new SfSurfaceChart();
chart.Type = SurfaceType.Surface;
chart.Header = "3D Surface Chart";
chart.Rotate = 30;
chart.Tilt = 15;

// Add data directly using AddPoints
for (double x = -4; x < 4; x += 0.2)
{
    for (double z = -4; z < 4; z += 0.2)
    {
        double y = 2 * (x * x) + 2 * (z * z) - 4;
        chart.Data.AddPoints(x, y, z);
    }
}

chart.RowSize = 40;
chart.ColumnSize = 40;

// Configure axes
chart.XAxis = new SurfaceAxis { Header = "X-Axis" };
chart.YAxis = new SurfaceAxis { Header = "Y-Axis", LabelFormat = "0.0" };
chart.ZAxis = new SurfaceAxis { Header = "Z-Axis" };

// Add color bar
ChartColorBar colorBar = new ChartColorBar();
colorBar.DockPosition = ChartDock.Right;
colorBar.ShowLabel = true;
chart.ColorBar = colorBar;

// Add to grid
grid.Children.Add(chart);

Common Patterns

Pattern 1: Mathematical Function Visualization

When visualizing mathematical functions in 3D:

// Generate data for z = sin(x) * cos(y)
for (double x = -Math.PI; x <= Math.PI; x += 0.1)
{
    for (double y = -Math.PI; y <= Math.PI; y += 0.1)
    {
        double z = Math.Sin(x) * Math.Cos(y);
        chart.Data.AddPoints(x, z, y);
    }
}

chart.RowSize = 63;  // Number of x points
chart.ColumnSize = 63;  // Number of y points

Pattern 2: Contour Chart for Top-Down View

When user needs a 2D contour view of 3D data:

<chart:SfSurfaceChart Type="Contour" 
                     Rotate="0"
                     ItemsSource="{Binding DataValues}"
                     XBindingPath="X" 
                     YBindingPath="Y" 
                     ZBindingPath="Z">
    <chart:SfSurfaceChart.ColorBar>
        <chart:ChartColorBar DockPosition="Right" ShowLabel="True"/>
    </chart:SfSurfaceChart.ColorBar>
</chart:SfSurfaceChart>

Pattern 3: Interactive Chart with User Control

When user needs to interact with the chart:

<chart:SfSurfaceChart EnableRotation="True" 
                     EnableZooming="True"
                     Type="Surface">
    <!-- Chart will respond to mouse drag (rotation) and mouse wheel (zoom) -->
</chart:SfSurfaceChart>

Pattern 4: Custom Color Palette

When user needs specific colors:

<chart:SfSurfaceChart Palette="Custom">
    <chart:SfSurfaceChart.ColorModel>
        <chart:ChartColorModel>
            <chart:ChartColorModel.CustomBrushes>
                <SolidColorBrush Color="Blue"/>
                <SolidColorBrush Color="Lime"/>
                <SolidColorBrush Color="Yellow"/>
                <SolidColorBrush Color="OrangeRed"/>
            </chart:ChartColorModel.CustomBrushes>
        </chart:ChartColorModel>
    </chart:SfSurfaceChart.ColorModel>
</chart:SfSurfaceChart>

Pattern 5: Wireframe Visualization

When user needs to see the mesh structure:

chart.Type = SurfaceType.WireframeSurface;
chart.WireframeStroke = new SolidColorBrush(Colors.Green);
chart.WireframeStrokeThickness = 1;

Key Properties

Essential Properties

  • Type - Surface type (Surface, WireframeSurface, Contour, WireframeContour)
  • ItemsSource - Data collection for binding
  • XBindingPath, YBindingPath, ZBindingPath - Property paths for X, Y, Z values
  • RowSize, ColumnSize - Grid dimensions for data
  • Data - Direct data collection using AddPoints method

Visual Properties

  • Header - Chart title
  • Rotate - Rotation angle (0-360)
  • Tilt - Tilt angle for viewing perspective
  • Palette - Color scheme (Metro, AutumnBrights, FloraHues, etc.)
  • ColorBar - Value range indicator with colors

Interaction Properties

  • EnableRotation - Allow mouse-drag rotation
  • EnableZooming - Allow mouse-wheel zoom
  • ZoomLevel - Programmatic zoom level

Axis Properties

  • XAxis, YAxis, ZAxis - Axis configuration objects
  • Each axis supports: Header, LabelFormat, Minimum, Maximum, Interval, etc.

Customization Properties

  • CameraProjection - Perspective or Orthographic view
  • LeftWallBrush, BottomWallBrush, BackWallBrush - Wall colors
  • WallThickness - Wall border thickness
  • WireframeStroke, WireframeStrokeThickness - Wireframe appearance
  • ApplyGradientBrush - Enable gradient coloring
  • BrushCount - Number of color steps in gradient

Common Use Cases

Use Case 1: Scientific Data Visualization

Scenario: Researcher needs to visualize experimental data with X, Y coordinates and measured Z values.

Approach: Use ItemsSource binding with data collection, configure appropriate axes with scientific notation, and use a clear color palette like Metro or BlueChrome for professional appearance.

Use Case 2: Mathematical Function Plotting

Scenario: Student needs to visualize a 3D mathematical function like z = f(x, y).

Approach: Generate data programmatically using nested loops, use Data.AddPoints for direct input, enable rotation for exploration, and use wireframe or standard surface type for clarity.

Use Case 3: Topographical Mapping

Scenario: Display elevation data or terrain visualization.

Approach: Use Contour type for 2D representation with color gradients, or Surface type for 3D terrain. Apply earth-toned custom palette (green-brown-white for elevation levels).

Use Case 4: Heat Map Visualization

Scenario: Show intensity or value distribution across two dimensions.

Approach: Use Contour type with Rotate="0" for flat view, configure ColorBar with ShowLabel="True", and apply gradient brushes with appropriate BrushCount for smooth transitions.

Use Case 5: Interactive Data Exploration

Scenario: User needs to explore complex 3D dataset from multiple angles.

Approach: Enable both EnableRotation and EnableZooming, provide initial good viewing angle with Rotate and Tilt, and consider adding UI controls to switch between Surface types dynamically.

Use Case 6: Engineering Analysis

Scenario: Visualize stress, temperature, or pressure distribution in engineering simulations.

Approach: Use Surface or WireframeSurface type, apply custom color palette matching engineering standards (e.g., blue for cold/low, red for hot/high), and configure axes with appropriate units and precision.

Next Steps

  1. For initial setup: Read getting-started.md
  2. To choose visualization type: Read surface-types.md
  3. For data integration: Read data-binding.md
  4. For detailed customization: Navigate to specific feature references as needed

Remember: SfSurfaceChart requires data in grid format with consistent RowSize and ColumnSize. The order of data points matters - they should be organized in row-major or column-major format for proper surface rendering.

Weekly Installs
4
Repository
syncfusion/wpf-…s-skills
First Seen
Today
Security Audits
Gen Agent Trust HubPass
SocketPass
SnykPass
Installed on
opencode4
gemini-cli4
deepagents4
antigravity4
claude-code4
github-copilot4