Implementing Syncfusion WPF 3D Charts
Comprehensive guide for implementing the Syncfusion® WPF 3D Charts (SfChart3D) control to create interactive 3D data visualizations in Windows Presentation Foundation applications. This skill covers setup, configuration, series types, axes, adornments, appearance customization, and interactive features for 3D charts.
When to Use This Skill
Use this skill when you need to:
- Create 3D visualizations with Column, Bar, Line, Area, Scatter, or Circular series
- Plot data in 3D space using X, Y, and Z coordinates with Depth Axis
- Implement interactive 3D charts with rotation, tilt, and perspective controls
- Configure 3D series with 11+ chart types (Column, Bar, Line, Scatter, Area, Stacking variants, Pie, Doughnut)
- Set up multiple axes (Numerical, Category, DateTime, TimeSpan, Logarithmic)
- Build Manhattan charts with multiple series on depth axis
- Add data adornments with 3D labels, markers, and positioning
- Customize appearance with palettes, colors, and themes
- Enable user interaction with dynamic rotation, selection, and exploding segments
- Optimize performance for large 3D datasets
Component Overview
The SfChart3D control provides comprehensive 3D charting capabilities for WPF applications, allowing you to visualize two-dimensional data in a three-dimensional view with full rotation support.
Key Capabilities:
- 11+ Series Types: Column, Bar, Line, Scatter, Area, Stacking variants, Pie, Doughnut
- 3D Visualization: Rotation, tilt, perspective angle for optimal data viewing
- Depth Axis (Z-Axis): True 3D plotting with X, Y, Z coordinates
- Manhattan Charts: Multiple series visualization on depth axis
- Multiple Axis Types: Numerical, Category, DateTime, TimeSpan, Logarithmic
- Interactive Features: Dynamic rotation, selection, exploding segments
- Data Adornments: 3D labels, markers, positioning
- Rich Customization: Palettes, colors, themes, styling
- Data Binding: Full MVVM support with ObservableCollection
- Animations: Series loading and data update animations
Documentation and Navigation Guide
Getting Started
📄 Read: references/getting-started.md
- Installation and assembly references (Syncfusion.SfChart.WPF)
- Adding SfChart3D control to WPF projects
- XAML namespace configuration
- Setting up PrimaryAxis and SecondaryAxis
- Basic data binding with ItemsSource, XBindingPath, YBindingPath
- Creating your first 3D chart with complete example
- Adding titles, legends, tooltips, and data labels
- ViewModel setup with ObservableCollection
Series Types
📄 Read: references/series-types.md
- Overview of 11+ series types and common properties
- Column charts (ColumnSeries3D) with Spacing and SegmentSpacing
- Bar charts (BarSeries3D)
- Line charts (LineSeries3D)
- Scatter charts (ScatterSeries3D) with size configuration
- Area charts (AreaSeries3D)
- Stacking charts (StackingColumnSeries3D, StackingColumn100Series3D, StackingBarSeries3D, StackingBar100Series3D)
- Circular charts (PieSeries3D, DoughnutSeries3D)
- Circular chart features (coefficients, semi-circular, dynamic explode)
- Series selection and Interior property
- When to use each series type
Axes Configuration
📄 Read: references/axes-configuration.md
- Axis overview (PrimaryAxis, SecondaryAxis, DepthAxis)
- NumericalAxis3D for numeric data
- CategoryAxis3D for categorical data
- DateTimeAxis3D for time-series data
- TimeSpanAxis3D for time duration data
- LogarithmicAxis3D for exponential data
- Depth Axis (Z-Axis) setup with ZBindingPath
- True 3D plotting with X, Y, Z coordinates
- Manhattan Charts with multiple series on depth axis
- Axis customization (headers, intervals, ranges)
- Troubleshooting axis configuration issues
Data Adornments
📄 Read: references/adornments.md
- ChartAdornmentInfo3D configuration
- Enabling data labels with ShowLabel property
- Data markers (types, shapes, customization)
- Label positioning options
- Label formatting and templates
- Adornment styling and appearance
- Performance considerations for large datasets
Appearance Customization
📄 Read: references/appearance-customization.md
- Predefined color palettes (Metro, AutumnBrights, FloraHues, Pineapple, TomotoSpectrum, RedChrome, PurpleChrome, BlueChrome, GreenChrome, Elite, LightCandy, SandyBeach)
- Applying palettes to series vs segments
- Custom palettes with ColorModel and CustomBrushes
- SegmentColorPath for data-driven coloring
- Series Interior property
- Theme integration
- Styling best practices
Interactive Features
📄 Read: references/interactive-features.md
- 3D rotation and navigation (EnableRotation, Rotation, Tilt, PerspectiveAngle)
- Dynamic rotation with mouse and touch devices
- Selection support (segment and series selection)
- Circular series explode (ExplodeOnMouseClick, ExplodeIndex, ExplodeAll)
- Tooltip configuration (ShowTooltip property)
- Animation support for series loading
- User interaction patterns and best practices
Quick Start Example
Here's a minimal example to create a 3D Column chart:
XAML:
<Window xmlns:chart="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF">
<Window.DataContext>
<local:ViewModel/>
</Window.DataContext>
<chart:SfChart3D Header="Sales Data 3D" Width="500" Height="500">
<!-- Primary Axis (X-Axis) -->
<chart:SfChart3D.PrimaryAxis>
<chart:CategoryAxis3D Header="Month"/>
</chart:SfChart3D.PrimaryAxis>
<!-- Secondary Axis (Y-Axis) -->
<chart:SfChart3D.SecondaryAxis>
<chart:NumericalAxis3D Header="Sales"/>
</chart:SfChart3D.SecondaryAxis>
<!-- Legend -->
<chart:SfChart3D.Legend>
<chart:ChartLegend/>
</chart:SfChart3D.Legend>
<!-- 3D Column Series -->
<chart:ColumnSeries3D
Label="Revenue"
ItemsSource="{Binding SalesData}"
XBindingPath="Month"
YBindingPath="Sales"
ShowTooltip="True">
<!-- Data Labels -->
<chart:ColumnSeries3D.AdornmentsInfo>
<chart:ChartAdornmentInfo3D ShowLabel="True"/>
</chart:ColumnSeries3D.AdornmentsInfo>
</chart:ColumnSeries3D>
</chart:SfChart3D>
</Window>C# ViewModel:
using System.Collections.ObjectModel;
public class SalesData
{
public string Month { get; set; }
public double Sales { get; set; }
}
public class ViewModel
{
public ObservableCollection<SalesData> SalesData { get; set; }
public ViewModel()
{
SalesData = new ObservableCollection<SalesData>
{
new SalesData { Month = "Jan", Sales = 35000 },
new SalesData { Month = "Feb", Sales = 48000 },
new SalesData { Month = "Mar", Sales = 42000 },
new SalesData { Month = "Apr", Sales = 56000 },
new SalesData { Month = "May", Sales = 63000 },
new SalesData { Month = "Jun", Sales = 71000 }
};
}
}Common Patterns
Pattern 1: 3D Chart with Rotation
Enable interactive rotation for better data exploration:
<chart:SfChart3D EnableRotation="True" Rotation="45" Tilt="-30" PerspectiveAngle="90">
<!-- Axes and series configuration -->
</chart:SfChart3D>Pattern 2: Manhattan Chart (Multiple Series on Depth Axis)
Visualize multiple series across depth axis:
<chart:SfChart3D Rotation="43">
<chart:SfChart3D.PrimaryAxis>
<chart:CategoryAxis3D/>
</chart:SfChart3D.PrimaryAxis>
<chart:SfChart3D.SecondaryAxis>
<chart:NumericalAxis3D/>
</chart:SfChart3D.SecondaryAxis>
<!-- Depth Axis (Z-Axis) -->
<chart:SfChart3D.DepthAxis>
<chart:CategoryAxis3D/>
</chart:SfChart3D.DepthAxis>
<chart:LineSeries3D Label="Product A" ItemsSource="{Binding Data1}"
XBindingPath="X" YBindingPath="Y"/>
<chart:LineSeries3D Label="Product B" ItemsSource="{Binding Data2}"
XBindingPath="X" YBindingPath="Y"/>
</chart:SfChart3D>Pattern 3: True 3D Plotting with X, Y, Z Coordinates
Plot data using all three dimensions:
<chart:SfChart3D>
<chart:SfChart3D.PrimaryAxis>
<chart:NumericalAxis3D/>
</chart:SfChart3D.PrimaryAxis>
<chart:SfChart3D.SecondaryAxis>
<chart:NumericalAxis3D/>
</chart:SfChart3D.SecondaryAxis>
<!-- Depth Axis for Z coordinates -->
<chart:SfChart3D.DepthAxis>
<chart:NumericalAxis3D Interval="1"/>
</chart:SfChart3D.DepthAxis>
<chart:ColumnSeries3D
ItemsSource="{Binding Data3D}"
XBindingPath="XValue"
YBindingPath="YValue"
ZBindingPath="ZValue"/>
</chart:SfChart3D>Pattern 4: 3D Pie Chart with Explode Effect
Create interactive circular charts:
<chart:PieSeries3D
ItemsSource="{Binding CategoryData}"
XBindingPath="Category"
YBindingPath="Value"
ExplodeOnMouseClick="True"
CircleCoefficient="0.8">
</chart:PieSeries3D>Pattern 5: Custom Color Palette
Apply custom colors to your 3D chart:
<chart:SfChart3D Palette="Custom">
<chart:SfChart3D.ColorModel>
<chart:ChartColorModel>
<chart:ChartColorModel.CustomBrushes>
<SolidColorBrush Color="#6366F1"/>
<SolidColorBrush Color="#8B5CF6"/>
<SolidColorBrush Color="#EC4899"/>
<SolidColorBrush Color="#F59E0B"/>
</chart:ChartColorModel.CustomBrushes>
</chart:ChartColorModel>
</chart:SfChart3D.ColorModel>
<!-- Series configuration -->
</chart:SfChart3D>Key Properties Reference
SfChart3D Control
- EnableRotation - Enable mouse/touch rotation
- Rotation - Initial rotation angle (0-360)
- Tilt - Vertical tilt angle
- PerspectiveAngle - 3D perspective (0-180)
- Depth - Chart depth for 3D effect
- PrimaryAxis - X-axis configuration
- SecondaryAxis - Y-axis configuration
- DepthAxis - Z-axis configuration (optional)
- Header - Chart title
- Legend - Legend configuration
- Palette - Color palette selection
Series Common Properties
- ItemsSource - Data collection binding
- XBindingPath - Property for X values
- YBindingPath - Property for Y values
- ZBindingPath - Property for Z values (depth axis)
- Label - Series name for legend
- ShowTooltip - Enable tooltips
- Interior - Series fill color
- AdornmentsInfo - Data label configuration
Spacing Properties (Column/Bar)
- Spacing - Space between segments (0-1)
- SegmentSpacing - Space between series (0-1)
Circular Series Properties
- CircleCoefficient - Inner circle size (Pie)
- DoughnutCoefficient - Inner circle size (Doughnut)
- StartAngle - Starting angle for semi-circular
- EndAngle - Ending angle for semi-circular
- ExplodeOnMouseClick - Enable click-to-explode
- ExplodeIndex - Index of segment to explode
- ExplodeAll - Explode all segments
Common Use Cases
Use Case 1: Financial Data Visualization
Visualize quarterly revenue across multiple products in 3D:
- Use ColumnSeries3D with DepthAxis for product comparison
- Apply CategoryAxis3D for quarters and products
- Enable Rotation for different viewing angles
- Add data labels to show exact values
Use Case 2: Scientific Data Analysis
Plot scientific measurements with X, Y, Z coordinates:
- Use ScatterSeries3D with ZBindingPath for 3D points
- Apply NumericalAxis3D for all three axes
- Enable dynamic rotation for data exploration
- Use custom markers for data point visualization
Use Case 3: Market Share Dashboard
Display market share distribution in 3D:
- Use PieSeries3D or DoughnutSeries3D for proportional data
- Apply custom palettes for brand colors
- Enable ExplodeOnMouseClick for interactivity
- Add tooltips for detailed information
Use Case 4: Time-Series Comparison
Compare multiple datasets over time in 3D:
- Use LineSeries3D with Manhattan chart pattern
- Apply DateTimeAxis3D for time-based X-axis
- Use Label property for series identification
- Enable Legend for series navigation
Use Case 5: Performance Metrics Dashboard
Visualize stacked performance metrics:
- Use StackingColumnSeries3D for cumulative data
- Apply custom colors via ColorModel
- Add data labels for metric values
- Enable tooltips for drill-down details
Troubleshooting Tips
Issue: Chart not displaying
- Verify assembly reference:
Syncfusion.SfChart.WPF - Check XAML namespace declaration
- Ensure ItemsSource has data
- Verify XBindingPath and YBindingPath match property names
Issue: 3D effect not visible
- Set Depth property (default: 100)
- Configure Rotation and Tilt angles
- Adjust PerspectiveAngle for depth perception
Issue: Rotation not working
- Set EnableRotation="True"
- Ensure chart has sufficient space (Width/Height)
- Check for mouse event conflicts
Issue: Depth axis not showing
- Add DepthAxis configuration to SfChart3D
- Set ZBindingPath on series
- Verify series type supports depth axis (Column, Bar, Line, Scatter, StackingColumn, StackingBar)
For detailed troubleshooting and advanced scenarios, refer to the specific reference documentation above.