Implementing Syncfusion WPF Charts (SfChart)

Comprehensive guide for implementing the Syncfusion® WPF Charts (SfChart) control in Windows Presentation Foundation applications. This skill covers everything from basic chart setup to advanced features like technical indicators, interactive behaviors, and performance optimization.

When to Use This Skill

Use this skill when you need to:

Create data visualizations with charts in WPF applications
Implement any of 38+ series types (Line, Column, Bar, Area, Pie, Financial, etc.)
Configure chart axes (Category, Numeric, DateTime, Logarithmic, TimeSpan,DateTimeCategory)
Bind data to charts using ItemsSource and binding paths
Add interactive features (zooming, panning, tooltips, crosshair, trackball)
Customize chart appearance (colors, themes, styles, templates)
Implement financial charts with technical indicators
Optimize chart performance for large datasets
Export or print charts from WPF applications
Troubleshoot chart-related issues in WPF

Component Overview

SfChart is a powerful data visualization control that provides:

38+ Chart Types: Line, Column, Bar, Area, Bubble, Scatter, Pie, Doughnut, Funnel, Pyramid, Financial (Candle, OHLC), Radar, Polar, Range, Spline, and more
High Performance: Render large datasets (millions of points) in milliseconds
Interactive Features: Zooming, panning, tooltips, crosshair, trackball, selection, visual data editing
Flexible Data Binding: MVVM support, complex data structures, dynamic updates
Multiple Axes: Stack and span multiple axes for complex visualizations
Technical Indicators: 10+ indicators for financial analysis (SMA, EMA, RSI, MACD, etc.)
Rich Customization: Themes, styles, templates, colors, fonts, and layouts
Advanced Features: Annotations, striplines, legends, data labels, markers
Export & Print: Save charts as images, print, serialize/deserialize state

Namespace: Syncfusion.UI.Xaml.Charts
Assembly: Syncfusion.SfChart.WPF

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Start here for basic chart implementation:

Adding chart references and NuGet packages
Basic chart initialization with axes
Adding your first series
Simple data binding setup
Running your first chart application
Minimal working example

Series Types and Data Visualization

📄 Read: references/series-types.md

Learn about all 38+ available series types:

Line, Column, Bar, and Area series
Bubble and Scatter charts
Financial charts (Candle, OHLC, HiLo, HiLoOpenClose)
Pie and Doughnut charts
Funnel and Pyramid charts
Radar and Polar charts
Range series (RangeArea, RangeColumn)
Spline variations (Spline, SplineArea)
Stacking series (StackingColumn, StackingArea, etc.)
When to use each series type
Combining multiple series

Axes Configuration

📄 Read: references/axes-configuration.md

Configure chart axes for proper data representation:

Axis types (CategoryAxis, NumericalAxis, DateTimeAxis, LogarithmicAxis)
Primary and Secondary axes
Multiple axes support and positioning
Axis labels, formatting, and rotation
Axis range, intervals, and auto-range
Axis line customization
Axis crossing and inversing
Strip lines on axes

Data Binding

📄 Read: references/data-binding.md

Bind data to chart series:

ItemsSource property configuration
XBindingPath and YBindingPath setup
Binding to collections and lists
Complex property binding
Dynamic data updates
MVVM pattern implementation
ObservableCollection support
Multiple series data binding

Legends

📄 Read: references/legends.md

Configure chart legends:

Legend positioning and docking
Legend visibility and toggling
Legend icons and customization
Legend item templates
Custom legend items
Legend orientation

Interactive Features

📄 Read: references/interactive-features.md

Add user interaction capabilities:

Tooltip configuration and customization
Crosshair behavior and styling
Trackball functionality
Zooming and panning (pinch, selection, mouse wheel)
Selection modes (single, multiple, series)
Visual data editing
Resizable scrollbar
Touch support

Adornments (Data Labels and Markers)

📄 Read: references/adornments.md

Display additional information on data points:

Data labels configuration
Label content and formatting
Smart label positioning
Data markers (symbols)
Marker customization
Label rotation and alignment
Custom adornment templates

Appearance and Styling

📄 Read: references/appearance-styling.md

Customize chart visual appearance:

Chart area styling (background, border)
Series colors and palettes
Chart header customization
Plot area configuration
Themes and visual styles
Font customization
Watermark support
Gradient and solid color fills

Annotations

📄 Read: references/annotations.md

Add custom annotations to charts:

Text annotations
Shape annotations (line, rectangle, ellipse)
Image annotations
Custom annotation templates
Positioning and alignment
Annotation interaction
Dynamic annotations

Striplines

📄 Read: references/striplines.md

Highlight axis regions with striplines:

Adding striplines to axes
Stripline styling and colors
Multiple striplines
Stripline labels
Recurring striplines
Stripline positioning

Technical Indicators

📄 Read: references/technical-indicators.md

Implement financial analysis indicators:

10+ technical indicators (SMA, EMA, RSI, MACD, Bollinger Bands, etc.)
Indicator configuration and parameters
Combining indicators with financial series
Multiple indicators on same chart
Custom indicator styling
Indicator signals

Performance Optimization

📄 Read: references/performance-optimization.md

Optimize charts for large datasets:

Fast series types (FastLine, FastColumn, FastBar, etc.)
Performance best practices
Rendering optimization
Memory management
Data sampling techniques
Segment rendering
Animation performance

Printing and Exporting

📄 Read: references/printing-exporting.md

Export and print charts:

Print functionality
Export to image formats (PNG, JPEG, BMP)
Export configuration options
Chart serialization
Saving and loading chart state
Export quality settings

Quick Start Example

Here's a minimal example to create a basic column chart:

<Window x:Class="ChartDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF"
        Title="Sales Chart" Height="450" Width="800">
    
    <syncfusion:SfChart>
        <!-- Primary Axis (X-Axis) -->
        <syncfusion:SfChart.PrimaryAxis>
            <syncfusion:CategoryAxis Header="Month"/>
        </syncfusion:SfChart.PrimaryAxis>
        
        <!-- Secondary Axis (Y-Axis) -->
        <syncfusion:SfChart.SecondaryAxis>
            <syncfusion:NumericalAxis Header="Sales ($)"/>
        </syncfusion:SfChart.SecondaryAxis>
        
        <!-- Column Series -->
        <syncfusion:ColumnSeries ItemsSource="{Binding SalesData}"
                                 XBindingPath="Month"
                                 YBindingPath="Sales"
                                 Label="Monthly Sales">
            <syncfusion:ColumnSeries.AdornmentsInfo>
                <syncfusion:ChartAdornmentInfo ShowLabel="True"/>
            </syncfusion:ColumnSeries.AdornmentsInfo>
        </syncfusion:ColumnSeries>
    </syncfusion:SfChart>
</Window>

using Syncfusion.UI.Xaml.Charts;
using System.Collections.ObjectModel;

namespace ChartDemo
{
    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 = 67000 },
                new SalesData { Month = "Jun", Sales = 72000 }
            };
        }
    }
}

Common Patterns

Pattern 1: Multiple Series Chart

<syncfusion:SfChart>
    <syncfusion:SfChart.PrimaryAxis>
        <syncfusion:CategoryAxis/>
    </syncfusion:SfChart.PrimaryAxis>
    
    <syncfusion:SfChart.SecondaryAxis>
        <syncfusion:NumericalAxis/>
    </syncfusion:SfChart.SecondaryAxis>
    
    <!-- First Series -->
    <syncfusion:LineSeries ItemsSource="{Binding Data2023}"
                           XBindingPath="Month"
                           YBindingPath="Value"
                           Label="2023"/>
    
    <!-- Second Series -->
    <syncfusion:LineSeries ItemsSource="{Binding Data2024}"
                           XBindingPath="Month"
                           YBindingPath="Value"
                           Label="2024"/>
</syncfusion:SfChart>

Pattern 2: Chart with Tooltip and Zooming

<syncfusion:SfChart>
    <syncfusion:SfChart.PrimaryAxis>
        <syncfusion:DateTimeAxis/>
    </syncfusion:SfChart.PrimaryAxis>
    
    <syncfusion:SfChart.SecondaryAxis>
        <syncfusion:NumericalAxis/>
    </syncfusion:SfChart.SecondaryAxis>
    
    <!-- Enable Tooltip -->
    <syncfusion:LineSeries ItemsSource="{Binding Data}"
                           XBindingPath="Date"
                           YBindingPath="Value"
                           ShowTooltip="True"/>
    
    <!-- Enable Zooming and Panning -->
    <syncfusion:SfChart.Behaviors>
        <syncfusion:ChartZoomPanBehavior EnableMouseWheelZooming="True"
                                          EnablePanning="True"
                                          EnableSelectionZooming="True"/>
    </syncfusion:SfChart.Behaviors>
</syncfusion:SfChart>

Pattern 3: Financial Chart with Technical Indicator

<syncfusion:SfChart>
    <syncfusion:SfChart.PrimaryAxis>
        <syncfusion:DateTimeAxis/>
    </syncfusion:SfChart.PrimaryAxis>
    
    <syncfusion:SfChart.SecondaryAxis>
        <syncfusion:NumericalAxis/>
    </syncfusion:SfChart.SecondaryAxis>
    
    <!-- Candlestick Series -->
    <syncfusion:CandleSeries ItemsSource="{Binding StockData}"
                             XBindingPath="Date"
                             High="High"
                             Low="Low"
                             Open="Open"
                             Close="Close"/>
    
    <!-- Simple Moving Average Indicator -->
    <syncfusion:SimpleAverageIndicator ItemsSource="{Binding StockData}"
                             XBindingPath="Date"
                             High="High"
                             Low="Low"
                             Open="Open"
                             Close="Close"
                             Period="14"/>
</syncfusion:SfChart>

Key Properties and Classes

SfChart Class

PrimaryAxis - The horizontal (X) axis
SecondaryAxis - The vertical (Y) axis
Series - Collection of chart series
Legend - Chart legend configuration
Header - Chart title
Behaviors - Interactive behaviors collection

ChartSeries Base Properties

ItemsSource - Data source for the series
XBindingPath - Property path for X values
YBindingPath - Property path for Y values
Label - Series name (shown in legend)
ShowTooltip - Enable/disable tooltips
Palette - Color palette for the series

Common Axis Properties

Header - Axis title
Interval - Space between axis labels
Minimum/Maximum - Axis range limits
LabelFormat - Format string for axis labels
ShowGridLines - Show/hide gridlines

Common Use Cases

Use Case 1: Sales Dashboard

Display monthly sales trends with multiple years comparison, tooltips, and data labels.

When to use:

Business reporting dashboards
Financial performance tracking
Trend analysis over time

Recommended series: Line, Column, or Area series with legends and tooltips.

Use Case 2: Stock Market Analysis

Show stock prices with candlestick charts and technical indicators (moving averages, RSI, MACD).

When to use:

Financial applications
Trading platforms
Investment analysis tools

Recommended series: CandleSeries, HiLoOpenCloseSeries with technical indicators.

Use Case 3: Data Distribution Visualization

Display data distribution and proportions using pie or doughnut charts.

When to use:

Market share analysis
Budget allocation display
Survey result visualization

Recommended series: PieSeries, DoughnutSeries with data labels.

Use Case 4: Scientific Data Plotting

Plot large datasets with high-performance series and zooming capabilities.

When to use:

Scientific applications
Engineering data visualization
Real-time monitoring

Recommended series: FastLineSeries, ScatterSeries with zooming and panning.

Use Case 5: Comparison Charts

Compare multiple datasets side-by-side with grouped or stacked columns.

When to use:

Product comparisons
Period-over-period analysis
Category comparisons

Recommended series: ColumnSeries, StackingColumnSeries, GroupedColumnSeries.

Tips and Best Practices

Choose the Right Series Type: Select series types based on your data and visualization goals. Line for trends, Column for comparisons, Pie for proportions, Financial for stock data.
Use Fast Series for Large Data: When dealing with thousands of data points, use Fast series types (FastLineSeries, FastColumnSeries) for better performance.
Enable Interactive Features: Add tooltips, zooming, and trackball to enhance user experience and data exploration.
Data Binding with MVVM: Use ObservableCollection and INotifyPropertyChanged for dynamic data updates.
Customize Appearance: Apply themes and custom styles to match your application's design language.
Optimize Performance: Disable animations, use segment rendering, and implement data sampling for very large datasets.
Multiple Axes for Different Scales: Use multiple axes when displaying data with different value ranges or units.
Add Context with Annotations: Use annotations and striplines to highlight important values, thresholds, or regions.

Related Components

Range Selector: ../implementing-range-selectors/ - Select date/value ranges for chart data filtering

Troubleshooting

Chart not displaying:

Verify Syncfusion.SfChart.WPF assembly reference
Check data binding and ItemsSource
Ensure axes are properly configured
Verify license key for licensed applications

Performance issues:

Switch to Fast series types for large datasets
Disable animations if not needed
Use data sampling or aggregation
Enable segment rendering

Data not updating:

Use ObservableCollection for ItemsSource
Implement INotifyPropertyChanged in data models
Check binding paths (XBindingPath, YBindingPath)

Next Steps

Read Getting Started to set up your first chart
Explore Series Types to find the right visualization
Configure Data Binding to connect your data
Add Interactive Features for better user experience
Customize Appearance to match your application design

For detailed information on any topic, navigate to the appropriate reference file listed in the Documentation and Navigation Guide section above.

syncfusion-wpf-charts

Implementing Syncfusion WPF Charts (SfChart)

When to Use This Skill

Component Overview

Documentation and Navigation Guide

Getting Started

Series Types and Data Visualization

Axes Configuration

Data Binding

Legends

Interactive Features

Adornments (Data Labels and Markers)

Appearance and Styling

Annotations

Striplines

Technical Indicators

Performance Optimization

Printing and Exporting

Quick Start Example

Common Patterns

Pattern 1: Multiple Series Chart

Pattern 2: Chart with Tooltip and Zooming

Pattern 3: Financial Chart with Technical Indicator

Key Properties and Classes

SfChart Class

ChartSeries Base Properties

Common Axis Properties

Common Use Cases

Use Case 1: Sales Dashboard

Use Case 2: Stock Market Analysis

Use Case 3: Data Distribution Visualization

Use Case 4: Scientific Data Plotting

Use Case 5: Comparison Charts

Tips and Best Practices

Related Components

Troubleshooting

Next Steps