Implementing Syncfusion WinUI Circular Charts

Component Overview

Syncfusion SfCircularChart is a powerful data visualization component for WinUI that displays data in circular formats. It supports:

• Two Chart Types: Pie and Doughnut series
• Rich Visual Elements: Legends, data labels, tooltips, headers
• User Interactions: Selection, explode segments, toggle visibility
• Multiple Series: Display multiple pie or doughnut series simultaneously
• Dynamic Updates: Real-time data binding and updates
• Extensive Customization: Palettes, gradients, templates, styling

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Read this reference when the user needs to:

• Install the Syncfusion.Chart.WinUI NuGet package
• Set up basic circular chart in XAML or C#
• Create a ViewModel with data model
• Bind data to the chart series
• Understand complete initial setup and configuration
• See a working minimal example

Chart Types

Pie Charts

📄 Read: references/pie-charts.md

Read this reference when the user needs to:

• Create and configure PieSeries
• Adjust pie chart radius
• Group small data points into "Others" category (GroupTo, GroupMode)
• Create semi-pie or quarter-pie charts (StartAngle, EndAngle)
• Implement combination charts (pie + doughnut together)
• Understand pie-specific features and configurations

Doughnut Charts

📄 Read: references/doughnut-charts.md

Read this reference when the user needs to:

• Create and configure DoughnutSeries
• Set inner radius (InnerRadius property)
• Display multiple doughnut series in one chart
• Create semi-doughnut or quarter-doughnut shapes
• Understand differences between pie and doughnut series
• Size and position doughnut charts

Visual Elements

Legend

📄 Read: references/legend.md

Read this reference when the user needs to:

• Enable and configure chart legend
• Add legend title or header
• Customize legend icons (type, size, template)
• Adjust legend placement (Left, Right, Top, Bottom)
• Add checkboxes for toggling segment visibility
• Customize legend appearance (background, borders, spacing)
• Create custom legend item templates
• Control legend item margins and alignment

Data Labels

📄 Read: references/data-labels.md

Read this reference when the user needs to:

• Enable and display data labels on segments
• Configure label context (Percentage, YValue, DataLabelItem)
• Customize label appearance (fonts, colors, borders)
• Position labels (Inside, Outside, OutsideExtended)
• Add connector lines between labels and segments
• Customize connector line styles and types (Line, Bezier, StraightLine)
• Rotate data labels
• Create custom data label templates
• Apply series palette to labels

Tooltips

📄 Read: references/tooltips.md

Read this reference when the user needs to:

• Enable tooltips on segment hover
• Configure tooltip behavior (duration, animation, delay)
• Customize tooltip styling (background, borders)
• Style tooltip labels (fonts, colors)
• Position tooltips (alignment, offsets)
• Create custom tooltip templates
• Control tooltip display settings

Title and Header

📄 Read: references/title-header.md

Read this reference when the user needs to:

• Add a title or header to the chart
• Use custom UIElements as chart header
• Align chart header (left, center, right)
• Style and format the chart title
• Create bordered or decorated headers

User Interactions

Selection

📄 Read: references/selection.md

Read this reference when the user needs to:

• Enable segment selection behavior
• Configure single or multi-selection modes
• Customize selection appearance (SelectionBrush)
• Programmatically select segments (SelectedIndex, SelectedIndexes)
• Handle selection events (SelectionChanging, SelectionChanged)
• Implement deselection behavior
• Control selection types (Single, SingleDeselect, Multiple, None)

Explode Segments

📄 Read: references/explode-segments.md

Read this reference when the user needs to:

• Explode specific segments to highlight them
• Set explode radius for separation distance
• Explode all segments simultaneously
• Enable tap-to-explode interaction
• Programmatically control exploded segments
• Understand when to use segment explosion

Customization

Appearance

📄 Read: references/appearance.md

Read this reference when the user needs to:

• Apply predefined palette brushes
• Create custom color palettes (PaletteBrushes)
• Apply gradients to segments (LinearGradientBrush, RadialGradientBrush)
• Customize segment colors and styling
• Understand visual customization patterns

Quick Start Example

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

1. Install NuGet Package:

Install-Package Syncfusion.Chart.WinUI

2. Create Data Model and ViewModel:

public class Sales
{
    public string Product { get; set; }
    public double SalesRate { get; set; }
}

public class ChartViewModel
{
    public List<Sales> Data { get; set; }

    public ChartViewModel()
    {
        Data = new List<Sales>()
        {
            new Sales() { Product = "iPad", SalesRate = 25 },
            new Sales() { Product = "iPhone", SalesRate = 35 },
            new Sales() { Product = "MacBook", SalesRate = 15 },
            new Sales() { Product = "Mac", SalesRate = 5 },
            new Sales() { Product = "Others", SalesRate = 10 }
        };
    }
}

3. Create Circular Chart in XAML:

<Window
    xmlns:chart="using:Syncfusion.UI.Xaml.Charts"
    xmlns:model="using:YourNamespace.ViewModel">

    <chart:SfCircularChart Header="Product Sales">
        <!-- Set DataContext -->
        <chart:SfCircularChart.DataContext>
            <model:ChartViewModel/>
        </chart:SfCircularChart.DataContext>
        
        <!-- Add Legend -->
        <chart:SfCircularChart.Legend>
            <chart:ChartLegend/>
        </chart:SfCircularChart.Legend>
        
        <!-- Add Pie Series -->
        <chart:SfCircularChart.Series>
            <chart:PieSeries ItemsSource="{Binding Data}"
                           XBindingPath="Product"
                           YBindingPath="SalesRate"
                           ShowDataLabels="True"
                           EnableTooltip="True"/>
        </chart:SfCircularChart.Series>
    </chart:SfCircularChart>
</Window>

4. Or Create in C#:

SfCircularChart chart = new SfCircularChart();
chart.Header = "Product Sales";
chart.DataContext = new ChartViewModel();
chart.Legend = new ChartLegend();

PieSeries series = new PieSeries();
series.SetBinding(PieSeries.ItemsSourceProperty, new Binding() { Path = new PropertyPath("Data") });
series.XBindingPath = "Product";
series.YBindingPath = "SalesRate";
series.ShowDataLabels = true;
series.EnableTooltip = true;

chart.Series.Add(series);
this.Content = chart;

Common Patterns

Pattern 1: Pie Chart with Data Labels and Legend

<chart:SfCircularChart Header="Sales Distribution">
    <chart:SfCircularChart.Legend>
        <chart:ChartLegend/>
    </chart:SfCircularChart.Legend>
    
    <chart:SfCircularChart.Series>
        <chart:PieSeries ItemsSource="{Binding Data}"
                       XBindingPath="Category"
                       YBindingPath="Value"
                       ShowDataLabels="True">
            <chart:PieSeries.DataLabelSettings>
                <chart:CircularDataLabelSettings Context="Percentage"
                                               Position="Outside"
                                               ShowConnectorLine="True"/>
            </chart:PieSeries.DataLabelSettings>
        </chart:PieSeries>
    </chart:SfCircularChart.Series>
</chart:SfCircularChart>

Pattern 2: Doughnut Chart with Custom Colors

<chart:SfCircularChart>
    <chart:SfCircularChart.Resources>
        <BrushCollection x:Key="customBrushes">
            <SolidColorBrush Color="#4dd0e1"/>
            <SolidColorBrush Color="#26c6da"/>
            <SolidColorBrush Color="#00bcd4"/>
        </BrushCollection>
    </chart:SfCircularChart.Resources>
    
    <chart:SfCircularChart.Series>
        <chart:DoughnutSeries ItemsSource="{Binding Data}"
                            XBindingPath="Name"
                            YBindingPath="Amount"
                            InnerRadius="0.6"
                            PaletteBrushes="{StaticResource customBrushes}"/>
    </chart:SfCircularChart.Series>
</chart:SfCircularChart>

Pattern 3: Interactive Chart with Selection and Explode

<chart:SfCircularChart>
    <chart:SfCircularChart.Series>
        <chart:PieSeries ItemsSource="{Binding Data}"
                       XBindingPath="Product"
                       YBindingPath="Sales"
                       ExplodeOnTap="True"
                       ExplodeRadius="10">
            <chart:PieSeries.SelectionBehavior>
                <chart:DataPointSelectionBehavior SelectionBrush="Orange"
                                                Type="Single"/>
            </chart:PieSeries.SelectionBehavior>
        </chart:PieSeries>
    </chart:SfCircularChart.Series>
</chart:SfCircularChart>

Pattern 4: Semi-Circular Chart

<chart:SfCircularChart>
    <chart:SfCircularChart.Series>
        <chart:PieSeries ItemsSource="{Binding Data}"
                       XBindingPath="Category"
                       YBindingPath="Value"
                       StartAngle="180"
                       EndAngle="360"
                       ShowDataLabels="True"/>
    </chart:SfCircularChart.Series>
</chart:SfCircularChart>

Key Properties

SfCircularChart Properties

• Header - Sets the chart title/header
• Legend - Configures the chart legend
• Series - Collection of circular series (PieSeries, DoughnutSeries)
• TooltipBehavior - Configures tooltip display behavior

Series Properties (PieSeries/DoughnutSeries)

• ItemsSource - Data source for the series
• XBindingPath - Property path for category/label values
• YBindingPath - Property path for numeric values
• ShowDataLabels - Enables data labels on segments
• EnableTooltip - Enables tooltips on hover
• PaletteBrushes - Custom colors for segments
• Radius - Size of the pie/doughnut (0 to 1)
• InnerRadius - Inner hole size for doughnut (0 to 1)
• StartAngle - Starting angle for rendering (0-360)
• EndAngle - Ending angle for rendering (0-360)
• ExplodeIndex - Index of segment to explode
• ExplodeAll - Explodes all segments
• ExplodeRadius - Distance for exploded segments
• ExplodeOnTap - Enables tap-to-explode interaction
• GroupTo - Threshold for grouping small segments
• GroupMode - Grouping mode (Value, Percentage, Angle)
• SelectionBehavior - Configures segment selection
• DataLabelSettings - Configures data label appearance
• LegendIcon - Icon type for legend items

Common Use Cases

When to Use Pie Charts

• Showing parts of a whole (market share, budget allocation)
• Displaying percentage distributions (survey results, demographics)
• Simple comparisons with 5-7 categories
• When proportions are more important than exact values
• Single data series visualization

When to Use Doughnut Charts

• Similar to pie charts but with better label placement (can use center)
• Multiple concentric series for comparison
• When you want to display central content (total, summary)
• More modern aesthetic preference
• Better for dense data with many categories

When to Use Explode Segments

• Highlighting specific data points (best performer, focus area)
• Drawing attention to important segments
• Creating visual emphasis for presentation
• Interactive exploration (tap to explode)

When to Use Selection

• Allowing users to filter or drill down into data
• Interactive dashboards where segment selection triggers other views
• Comparison scenarios (select multiple segments)
• Data exploration interfaces

Related Components

• Cartesian Charts - For time-series, trends, and comparisons (bar, line, column charts)
• Funnel/Pyramid Charts - For hierarchical or stage-based data
• Gauge Charts - For single-value indicators with ranges

Tips and Best Practices

1. Limit segments to 5-7 for readability; use GroupTo for small values
2. Use data labels for exact values; legends for category names
3. Enable tooltips for interactive exploration
4. Consider doughnut for multiple series or central content
5. Use selection sparingly; explode for emphasis only
6. Choose contrasting colors for better segment differentiation
7. Test responsiveness - circular charts adapt well to different sizes