Syncfusion Winui Cartesian Charts

Implementing Syncfusion WinUI Cartesian Charts

The Syncfusion WinUI Cartesian Chart (SfCartesianChart) provides a powerful way to visualize data with high interactivity, flexibility, and performance. It supports multiple series types, extensive customization options, and interactive features like zooming, panning, tooltips, and selection.

When to Use This Skill

Use this skill when the user needs to:

• Create any cartesian chart in a WinUI application (column, line, area, bar, scatter, bubble, financial, stacked charts)
• Configure chart axes (CategoryAxis, NumericalAxis, DateTimeAxis, LogarithmicAxis, multiple axes)
• Implement high-performance charts with large datasets (fast series with millions of data points)
• Add interactive features (zooming, panning, tooltips, trackball, crosshair, selection)
• Customize chart appearance (legends, data labels, colors, themes, styling)
• Display financial data (OHLC, candlestick charts)
• Compare multiple data series in the same chart area
• Handle touch and mouse interactions for data exploration

Component Overview

The SfCartesianChart is Syncfusion's primary charting control for WinUI applications using a two-dimensional coordinate system. Supports 15+ series types (basic, specialized, stacked, fast), four axis types (Numerical, Category, DateTime, Logarithmic), and handles millions of data points with optimized fast series. Includes zooming, panning, tooltips, trackball, crosshair, and full customization options.

Core Architecture

SfCartesianChart
├── XAxes Collection (1+ horizontal axes)
├── YAxes Collection (1+ vertical axes)
├── Series Collection (1+ data series)
│   ├── Basic: ColumnSeries, BarSeries, LineSeries, AreaSeries
│   ├── Specialized: ScatterSeries, BubbleSeries, CandleSeries, OHLCSeries
│   ├── Stacked: StackedColumnSeries, StackedAreaSeries, Stacked100Series
│   └── Fast: FastLineBitmapSeries, FastColumnBitmapSeries, FastScatterBitmapSeries
├── Legend (optional)
├── ZoomPanBehavior (optional)
└── Visual Elements (Header, ChartArea, PlotArea, PaletteBrushes)

Key Capabilities at a Glance

• Data Binding: Direct binding to ObservableCollection, List, or any IEnumerable with automatic updates
• Multiple Series: Display unlimited series in one chart with automatic color assignment and legend coordination
• Real-Time Updates: Supports dynamic data with efficient rendering for live dashboards and monitoring
• Touch & Mouse: Full gesture support for mobile and desktop scenarios (pinch-zoom, pan, hover tooltips)
• Accessibility: Built with WinUI standards for keyboard navigation and screen reader support
• Responsive: Adapts to container size changes with automatic axis label optimization

When to Choose SfCartesianChart vs. Other Chart Types

Use SfCartesianChart when: Data has two quantitative dimensions (X and Y), time-series analysis, comparisons across categories, trend analysis, financial data (OHLC), scientific plots, or any scenario requiring rectangular coordinate system.

Consider alternatives when:

• Circular relationships → Use SfCircularChart (Pie, Doughnut, Radial Bar)
• Hierarchical data → Use SfPyramidChart or SfFunnelChart
• Directional data → Use SfPolarChart

Key Features

Series Types

• Basic Series: Column, Bar, Line, Area
• Specialized Series: Scatter, Bubble, Candle, OHLC
• Stacked Series: Stacked Column/Bar/Line/Area, Stacked100
• Fast Series: FastLine, FastLineBitmap, FastColumn, FastScatter, FastStepLine (optimized for millions of points)

Axes

• Types: NumericalAxis, CategoryAxis, DateTimeAxis, LogarithmicAxis
• Features: Multiple axes, custom intervals, range customization, inversed/opposed positioning
• Customization: Labels, headers, grid lines, tick lines, padding, auto-scrolling

Interactive Features

• Zooming and panning (touch/mouse)
• Tooltips with custom templates
• Trackball for multi-series tracking
• Crosshair for precise reading
• Segment and series selection

Customization

• Legends with positioning and templates
• Data labels with positioning and formatting
• Chart titles and headers
• ChartArea, PlotArea styling, Color palettes and themes

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installing Syncfusion.Chart.WinUI NuGet package
• Namespace imports and control initialization
• Creating ViewModel with data binding
• Setting up XAxes and YAxes
• Adding your first series
• Complete working example with ColumnSeries

Axes Configuration

Axis Types

📄 Read: references/axis-types.md

• NumericalAxis - For numeric data with interval and range customization
• CategoryAxis - For categorical data with index-based plotting and label placement options
• DateTimeAxis - For time-series data with date/time formatting and interval types
• LogarithmicAxis - For logarithmic scale with customizable base
• When to use each axis type
• Interval configuration and range customization

Axis Customization

📄 Read: references/axis-customization.md

• Axis labels (rotation, formatting, styling)
• Axis headers and titles
• Grid lines (major/minor, visibility, styling)
• Tick lines (customization and styling) and Axis line styling
• Padding and range padding
• IsInversed and OpposedPosition properties
• Auto-scrolling with AutoScrollingDelta

Multiple Axes

📄 Read: references/multiple-axes.md

• Using XAxes and YAxes collections
• Assigning series to specific axes (XAxisName, YAxisName)
• Arranging multiple series with different scales
• Stacked vs side-by-side axis arrangements
• Axis events (ActualRangeChanged, LabelCreated)

Series Types

Basic Series

📄 Read: references/basic-series.md

• ColumnSeries - Vertical bars for comparing categories
• BarSeries - Horizontal bars for ranking or comparison
• LineSeries - Connected points showing trends over time
• AreaSeries - Filled regions showing magnitude and trends
• ItemsSource, XBindingPath, YBindingPath configuration
• Common properties and styling

Specialized Series

📄 Read: references/specialized-series.md

• ScatterSeries - XY plots for correlation analysis
• BubbleSeries - Three-dimensional data with size representation
• CandleSeries - Financial OHLC data with filled bodies
• OHLCSeries - Open-High-Low-Close financial data
• Financial data binding patterns
• Bubble size configuration

Stacked Series

📄 Read: references/stacked-series.md

• Stacked series - Column, Bar, Line, Area (show cumulative totals)
• Stacked100 series - Percentage-based comparison (100% stacked)
• Grouping multiple stacked series
• Data requirements and coordination
• Use cases for part-to-whole analysis

Fast Series (High Performance)

📄 Read: references/fast-series.md

• FastLineSeries - Polyline rendering for large line datasets
• FastLineBitmapSeries - WriteableBitmap rendering (millions of points)
• FastColumnBitmapSeries - High-performance column rendering
• FastScatterBitmapSeries - Large scatter plots
• FastStepLineBitmapSeries - Step line charts with performance optimization
• EnableAntiAliasing for bitmap-based series
• When to use fast series vs standard series
• Performance best practices

Interactive Features

Tooltip, Trackball, and Crosshair

📄 Read: references/tooltip-trackball-crosshair.md

• Tooltips - EnableTooltip, custom templates, styling
• Trackball - Multi-series tracking with vertical line indicator
• Crosshair - Precise reading with horizontal and vertical lines
• Touch and mouse interaction patterns
• Custom content and positioning

Selection

📄 Read: references/selection.md

• EnableSegmentSelection and EnableSeriesSelection
• Selection modes (Single, Multiple)
• SelectedIndex property
• SelectionBehavior configuration
• Visual feedback customization
• Selection events

Zooming and Panning

📄 Read: references/zooming-panning.md

• EnableZooming property
• ZoomMode (X, Y, XY)
• EnablePanning for data exploration
• Touch gestures (pinch-to-zoom)
• Mouse wheel zooming
• Programmatic zoom (ZoomPosition, ZoomFactor)
• Reset zoom functionality and Zoom toolbar

Customization

Data Labels

📄 Read: references/data-labels.md

• ShowDataLabels property
• DataLabelSettings configuration
• Label positioning (Inner, Outer, Auto)
• Label templates and formatting
• Style customization (fonts, colors)
• Rotation and alignment

Legend

📄 Read: references/legend.md

• Enabling ChartLegend
• Positioning and placement options
• Legend template customization
• Icon types and styles
• Item clicking and toggling series visibility
• Label customization

Multiple Series Visualization

📄 Read: references/multiple-series.md

• Adding multiple series to Series collection
• Comparing different datasets
• Series visibility toggling
• Color palettes for visual distinction
• Legend coordination
• Performance considerations
• Mixed series types in one chart

Appearance Customization

📄 Read: references/appearance-customization.md

• Chart Header and Title configuration
• ChartArea background and borders
• PaletteBrushes for series colors
• Series-level styling (Fill, Stroke, StrokeThickness)
• PlotArea customization
• Grid line styling and Theme integration
• Responsive design patterns

Quick Start Example

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

<Window
    xmlns:chart="using:Syncfusion.UI.Xaml.Charts">
    
    <chart:SfCartesianChart Header="Sales Comparison">
        
        <!-- Define X-Axis (Category) -->
        <chart:SfCartesianChart.XAxes>
            <chart:CategoryAxis Header="Products"/>
        </chart:SfCartesianChart.XAxes>
        
        <!-- Define Y-Axis (Numerical) -->
        <chart:SfCartesianChart.YAxes>
            <chart:NumericalAxis Header="Sales ($)"/>
        </chart:SfCartesianChart.YAxes>
        
        <!-- Add Column Series -->
        <chart:ColumnSeries ItemsSource="{Binding SalesData}"
                            XBindingPath="Product" YBindingPath="Amount"
                            Label="Q1 Sales" ShowDataLabels="True"/>
    </chart:SfCartesianChart>
</Window>

// Data Model
public class SalesData
{
    public string Product { get; set; }
    public double Amount { get; set; }
}

// ViewModel with sample data
public class ViewModel
{
    public List<SalesData> SalesData { get; set; } = new()
    {
        new() { Product = "Product A", Amount = 25000 },
        new() { Product = "Product B", Amount = 38000 },
        new() { Product = "Product C", Amount = 17000 }
    };
}

Common Patterns

Pattern 1: Multi-Series Comparison

Compare multiple datasets in the same chart:

<chart:SfCartesianChart Header="Quarterly Sales Comparison">
    
    <!-- Define X and Y Axis   -->

    <!-- Multiple series -->
    <chart:ColumnSeries Label="Q1" 
                       ItemsSource="{Binding Q1Data}"
                       XBindingPath="Month" 
                       YBindingPath="Sales"/>
    
    <chart:ColumnSeries Label="Q2" 
                       ItemsSource="{Binding Q2Data}"
                       XBindingPath="Month" 
                       YBindingPath="Sales"/>
    
</chart:SfCartesianChart>

Pattern 2: Time-Series Line Chart with Zooming

Display time-based data with interactive zooming:

<chart:SfCartesianChart>
    
    <chart:SfCartesianChart.XAxes>
        <chart:DateTimeAxis>
            <chart:DateTimeAxis.LabelStyle>
                <chart:LabelStyle LabelFormat="MMM-dd"/>
            </chart:DateTimeAxis.LabelStyle>
        </chart:DateTimeAxis>
    </chart:SfCartesianChart.XAxes>
    
    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis/>
    </chart:SfCartesianChart.YAxes>
    
    <chart:LineSeries ItemsSource="{Binding TimeSeriesData}"
                     XBindingPath="Date" 
                     YBindingPath="Value"
                     EnableTooltip="True"/>
    
    <!-- Enable zooming and panning -->
    <chart:SfCartesianChart.ZoomPanBehavior>
        <chart:ChartZoomPanBehavior EnableZooming="True" 
                                   EnablePanning="True"
                                   ZoomMode="XY"/>
    </chart:SfCartesianChart.ZoomPanBehavior>
    
</chart:SfCartesianChart>

Pattern 3: Stacked Chart for Part-to-Whole Analysis

Show contribution of parts to a total:

<chart:SfCartesianChart Header="Market Share by Region">
    
    <!-- Define X and Y Axis   -->
    
    <!-- Stacked Column Series -->
    <chart:StackedColumnSeries Label="Region A" 
                              ItemsSource="{Binding Data}"
                              XBindingPath="Year" 
                              YBindingPath="RegionA"/>
    
    <chart:StackedColumnSeries Label="Region B" 
                              ItemsSource="{Binding Data}"
                              XBindingPath="Year" 
                              YBindingPath="RegionB"/>
    
    <chart:StackedColumnSeries Label="Region C" 
                              ItemsSource="{Binding Data}"
                              XBindingPath="Year" 
                              YBindingPath="RegionC"/>
    
</chart:SfCartesianChart>

Pattern 4: High-Performance Chart for Large Datasets

Use fast series for millions of data points:

SfCartesianChart chart = new SfCartesianChart();

//Define X and Y Axis   -->

// Use FastLineBitmapSeries for performance
FastLineBitmapSeries series = new FastLineBitmapSeries
{
    ItemsSource = GenerateLargeDataset(1000000), // 1 million points
    XBindingPath = "Time",
    YBindingPath = "Value",
    EnableAntiAliasing = true // Smooth rendering
};

chart.Series.Add(series);

Pattern 5: Financial Chart with Multiple Axes

Display OHLC data with volume on separate axis:

<chart:SfCartesianChart>
    
    <chart:SfCartesianChart.XAxes>
        <chart:DateTimeAxis/>
    </chart:SfCartesianChart.XAxes>
    
    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis Header="Price"/>
        <chart:NumericalAxis Name="VolumeAxis" 
                           Header="Volume"
                           OpposedPosition="True"/>
    </chart:SfCartesianChart.YAxes>
    
    <!-- OHLC Series on primary axis -->
    <chart:CandleSeries ItemsSource="{Binding StockData}"
                       XBindingPath="Date"
                       Open="Open"
                       High="High"
                       Low="Low"
                       Close="Close"/>
    
    <!-- Volume on secondary axis -->
    <chart:ColumnSeries ItemsSource="{Binding StockData}"
                       XBindingPath="Date"
                       YBindingPath="Volume"
                       YAxisName="VolumeAxis"/>
    
</chart:SfCartesianChart>

Key Properties Overview

SfCartesianChart

• Header - Chart title
• XAxes - Collection of horizontal axes
• YAxes - Collection of vertical axes
• Series - Collection of chart series
• Legend - Legend configuration
• ZoomPanBehavior - Zooming and panning behavior
• PaletteBrushes - Color palette for series

ChartSeries (Base)

• ItemsSource - Data source
• XBindingPath - Property path for X values
• YBindingPath - Property path for Y values
• Label - Series label for legend
• ShowDataLabels - Enable data labels
• EnableTooltip - Enable tooltips
• EnableAnimation - Enable series animation
• XAxisName - Name of X-axis to use
• YAxisName - Name of Y-axis to use

Axis (Base)

• Header - Axis title
• Interval - Interval between labels
• Minimum - Minimum axis value
• Maximum - Maximum axis value
• LabelRotation - Label rotation angle
• LabelStyle - Label formatting and styling
• ShowMajorGridLines - Show/hide grid lines
• IsInversed - Invert axis direction
• OpposedPosition - Position axis on opposite side

Performance Considerations

When to Use Fast Series

• Dataset size > 10,000 points: Consider FastLineSeries or FastLineBitmapSeries
• Dataset size > 100,000 points: Use FastLineBitmapSeries, FastColumnBitmapSeries, or FastScatterBitmapSeries
• Real-time updates: Fast series provide better performance for streaming data
• Trade-offs: Fast series have limited interactivity (no segment selection, limited tooltip customization)

Optimization Tips

• Use CategoryAxis for categorical data instead of formatting NumericalAxis
• Enable EnableAntiAliasing for FastBitmap series to improve visual quality
• Limit ShowDataLabels usage for large datasets
• Use data virtualization in ViewModel for very large datasets
• Consider sampling or aggregation for datasets over 1 million points
• Disable animations for better initial render performance

Common Use Cases

1. Business Dashboards - Multi-series column/line charts with legends and tooltips
2. Financial Analysis - Candlestick/OHLC charts with volume overlay on multiple axes
3. Time-Series Monitoring - Real-time line charts with zooming/panning
4. Comparative Analysis - Stacked charts for part-to-whole relationships

Troubleshooting Tips

• Series not visible: Verify XAxes and YAxes are defined before adding series
• Data not binding: Check XBindingPath and YBindingPath match data model property names
• Performance issues: Switch to fast series for datasets over 10,000 points
• Axis labels overlapping: Use LabelRotation or increase chart width
• Multiple axes not working: Ensure XAxisName/YAxisName matches the Name property of the axis
• Zooming not working: Add ChartZoomPanBehavior to chart and set EnableZooming=True

Related Skills

When working with Syncfusion WinUI components, you may also need:

• Circular Charts - For pie, doughnut, and radial charts
• Polar Charts - For polar and radar visualizations
• 3D Charts - For three-dimensional data representation
• Funnel/Pyramid Charts - For hierarchical data visualization