Implementing Syncfusion WinUI Funnel Charts

The Syncfusion WinUI Funnel Chart (SfFunnelChart) is a specialized data visualization control for representing data that progressively decreases across stages in a process. It's ideal for analyzing conversion rates, sales pipelines, recruitment processes, and any workflow with sequential stages.

When to Use This Skill

Use this skill when the user needs to:

• Visualize conversion funnels - Sales pipelines, marketing campaigns, user acquisition flows
• Analyze process stages - Recruitment pipelines, order fulfillment, application workflows
• Display hierarchical data - Data that naturally decreases from stage to stage
• Create stage-based metrics - Performance tracking across sequential phases
• Implement interactive data exploration - With tooltips, selection, and segment explosion
• Customize visual appearance - Palettes, gradients, labels, legends, and styling

Component Overview

The SfFunnelChart is part of the Syncfusion.Chart.WinUI NuGet package and provides:

• Data binding with ItemsSource, XBindingPath, and YBindingPath
• Visual customization through titles, legends, data labels, and appearance settings
• Interactive features including tooltips, selection, and exploding segments
• Flexible rendering with multiple modes and layout options
• Rich styling using palettes, gradients, and custom templates

Documentation and Navigation Guide

Getting Started

📄 Read: [references/getting-started.md](references/getting-started.md)

Use this reference when you need to:

• Install the Syncfusion.Chart.WinUI NuGet package
• Set up basic chart structure with XAML or C#
• Configure namespace imports (Syncfusion.UI.Xaml.Charts)
• Create and bind a ViewModel with data
• Set XBindingPath and YBindingPath for data mapping
• Display your first funnel chart with basic configuration

Title Customization

📄 Read: [references/title-customization.md](references/title-customization.md)

Use this reference when you need to:

• Add a title to the chart using the Header property
• Customize title appearance with custom templates
• Align the title (left, center, right)
• Style title elements with borders, colors, and fonts
• Create complex title layouts

Legend Configuration

📄 Read: [references/legend.md](references/legend.md)

Use this reference when you need to:

• Enable and configure the chart legend
• Add a legend title or header
• Customize legend icons (size, visibility)
• Control legend item spacing and layout
• Add checkboxes for toggling segment visibility
• Position the legend (top, bottom, left, right)
• Style the legend background and borders
• Create custom legend item templates

Data Labels

📄 Read: [references/data-labels.md](references/data-labels.md)

Use this reference when you need to:

• Enable data labels with ShowDataLabels
• Configure label context (YValue, Percentage, XValue)
• Customize label appearance (colors, fonts, borders)
• Format label values with custom patterns
• Rotate labels for better positioning
• Create custom label templates

Tooltips

📄 Read: [references/tooltip.md](references/tooltip.md)

Use this reference when you need to:

• Enable tooltips with EnableTooltip
• Configure ChartTooltipBehavior for customization
• Style tooltip background and borders
• Customize tooltip label text styles
• Position tooltips with alignment and offset properties
• Control tooltip timing (duration, delay, animation)
• Create custom tooltip templates

Selection

📄 Read: [references/selection.md](references/selection.md)

Use this reference when you need to:

• Enable segment selection with DataPointSelectionBehavior
• Configure selection types (Single, SingleDeselect, Multiple, None)
• Customize selection appearance with SelectionBrush
• Programmatically select segments using SelectedIndex or SelectedIndexes
• Handle selection events (SelectionChanging, SelectionChanged)
• Implement custom selection logic

Exploding Segments

📄 Read: [references/exploding-segments.md](references/exploding-segments.md)

Use this reference when you need to:

• Explode specific segments to draw attention
• Configure ExplodeIndex for initial explosion
• Set ExplodeOffset to control explosion distance
• Enable ExplodeOnTap for interactive explosion
• Highlight important data points visually

Appearance and Styling

📄 Read: [references/appearance-styling.md](references/appearance-styling.md)

Use this reference when you need to:

• Apply predefined palette brushes
• Create custom color palettes
• Apply linear gradients to segments
• Apply radial gradients to segments
• Configure gradient stops and colors
• Design cohesive color schemes

Advanced Features

📄 Read: [references/advanced-features.md](references/advanced-features.md)

Use this reference when you need to:

• Add spacing between segments using GapRatio
• Customize the neck width with MinimumWidth
• Create inverted pyramids
• Configure rendering mode (ValueIsHeight vs ValueIsWidth)
• Optimize chart performance
• Handle edge cases and complex scenarios

Quick Start Example

Here's a minimal example to create a funnel chart with legend and data labels:

XAML Implementation

<Window
    x:Class="FunnelChartDemo.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:chart="using:Syncfusion.UI.Xaml.Charts"
    xmlns:model="using:FunnelChartDemo.ViewModel">

    <chart:SfFunnelChart x:Name="chart"
                         Header="SALES PIPELINE"
                         EnableTooltip="True"
                         ShowDataLabels="True"
                         Height="400" Width="600"
                         ItemsSource="{Binding Data}"
                         XBindingPath="Stage"
                         YBindingPath="Value">
        
        <chart:SfFunnelChart.DataContext>
            <model:ChartViewModel />
        </chart:SfFunnelChart.DataContext>
        
        <chart:SfFunnelChart.Legend>
            <chart:ChartLegend />
        </chart:SfFunnelChart.Legend>
    </chart:SfFunnelChart>
</Window>

C# Implementation

using Syncfusion.UI.Xaml.Charts;

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();
        
        SfFunnelChart chart = new SfFunnelChart();
        ChartViewModel viewModel = new ChartViewModel();
        chart.DataContext = viewModel;
        
        chart.SetBinding(
            SfFunnelChart.ItemsSourceProperty,
            new Binding() { Path = new PropertyPath("Data") });
        
        chart.XBindingPath = "Stage";
        chart.YBindingPath = "Value";
        chart.Header = "SALES PIPELINE";
        chart.Height = 400;
        chart.Width = 600;
        chart.Legend = new ChartLegend();
        chart.EnableTooltip = true;
        chart.ShowDataLabels = true;
        
        this.Content = chart;
    }
}

ViewModel

public class Model
{
    public string Stage { get; set; }
    public double Value { get; set; }
}

public class ChartViewModel
{
    public List<Model> Data { get; set; }
    
    public ChartViewModel()
    {
        Data = new List<Model>()
        {
            new Model() { Stage = "Leads", Value = 1000 },
            new Model() { Stage = "Qualified", Value = 750 },
            new Model() { Stage = "Proposal", Value = 500 },
            new Model() { Stage = "Negotiation", Value = 300 },
            new Model() { Stage = "Closed Won", Value = 150 }
        };
    }
}

Common Patterns

Pattern 1: Sales Funnel with Custom Colors

<Grid>
    <Grid.Resources>
        <BrushCollection x:Key="salesColors">
            <SolidColorBrush Color="#4dd0e1"/>
            <SolidColorBrush Color="#26c6da"/>
            <SolidColorBrush Color="#00bcd4"/>
            <SolidColorBrush Color="#0097a7"/>
            <SolidColorBrush Color="#00838f"/>
        </BrushCollection>
    </Grid.Resources>
    
    <chart:SfFunnelChart ItemsSource="{Binding Data}"
                         XBindingPath="Stage"
                         YBindingPath="Value"
                         PaletteBrushes="{StaticResource salesColors}"
                         ShowDataLabels="True">
        <chart:SfFunnelChart.DataLabelSettings>
            <chart:FunnelDataLabelSettings Context="Percentage" 
                                          Foreground="White" />
        </chart:SfFunnelChart.DataLabelSettings>
    </chart:SfFunnelChart>
</Grid>

Pattern 2: Interactive Funnel with Selection

<chart:SfFunnelChart ItemsSource="{Binding Data}"
                     XBindingPath="Stage"
                     YBindingPath="Value"
                     EnableTooltip="True">
    
    <chart:SfFunnelChart.SelectionBehavior>
        <chart:DataPointSelectionBehavior SelectionBrush="Orange"
                                         Type="Single"/>
    </chart:SfFunnelChart.SelectionBehavior>
    
    <chart:SfFunnelChart.TooltipBehavior>
        <chart:ChartTooltipBehavior />
    </chart:SfFunnelChart.TooltipBehavior>
</chart:SfFunnelChart>

Pattern 3: Exploded Segment Emphasis

<chart:SfFunnelChart ItemsSource="{Binding Data}"
                     XBindingPath="Stage"
                     YBindingPath="Value"
                     ExplodeIndex="2"
                     ExplodeOffset="40"
                     ExplodeOnTap="True"
                     GapRatio="0.1">
</chart:SfFunnelChart>

Key Properties Reference

Essential Properties

• ItemsSource - Data source for the chart
• XBindingPath - Property path for segment labels (stage names)
• YBindingPath - Property path for segment values
• Header - Chart title (string or UIElement)
• Legend - ChartLegend instance for displaying segment information

Visual Properties

• ShowDataLabels - Enable/disable data labels (bool)
• EnableTooltip - Enable/disable tooltips (bool)
• PaletteBrushes - Custom color palette (BrushCollection)
• GapRatio - Spacing between segments (0.0 to 1.0)
• MinimumWidth - Neck width at the bottom (double)

Rendering Properties

• Mode - Rendering mode: ValueIsHeight or ValueIsWidth
• Height / Width - Chart dimensions

Interaction Properties

• SelectionBehavior - Configure segment selection
• ExplodeIndex - Index of segment to explode
• ExplodeOffset - Distance of exploded segment
• ExplodeOnTap - Enable interactive explosion

Configuration Objects

• DataLabelSettings - FunnelDataLabelSettings for label customization
• TooltipBehavior - ChartTooltipBehavior for tooltip customization

Common Use Cases

Sales and Marketing Analytics

• Visualize sales pipeline stages from leads to closed deals
• Track marketing campaign conversion rates
• Analyze customer acquisition funnels
• Display website visitor conversion paths

Business Process Analysis

• Recruitment pipeline visualization (applicants → hired)
• Order fulfillment stages
• Customer support ticket resolution flow
• Product development milestones

E-commerce and Retail

• Shopping cart abandonment analysis
• Checkout process completion rates
• Product browsing to purchase conversion
• Customer journey mapping

Financial Services

• Loan application process stages
• Investment funnel analysis
• Customer onboarding progress
• Account upgrade conversion tracking

Related Skills

• [Implementing Syncfusion WinUI Components](../../) - Parent library skill
• Other WinUI Chart Types (if available in the library)

Need help? Refer to the specific reference files above based on the feature you want to implement.