# Syncfusion Winui Funnel Chart

> Implement Syncfusion WinUI Funnel Chart (SfFunnelChart) for visualizing data across stages in a process or workflow. Use this when working with funnel charts, conversion funnels, sales pipelines, or process stage analysis in WinUI applications. This skill covers stage-based metrics, hierarchical data representation with decreasing values, and visual representation of progressive reduction in data values across sequential stages.

- Skill: `syncfusion/syncfusion-winui-funnel-chart` (Agent Skill, multi-file: 10 files)
- Install (CLI): `npx skillmds@latest add syncfusion/syncfusion-winui-funnel-chart`
- Raw SKILL.md: https://api.skillmd.com/api/skills/syncfusion/syncfusion-winui-funnel-chart/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Productivity
- Author: syncfusion (https://skillmd.com/u/syncfusion)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/syncfusion/syncfusion-winui-funnel-chart

---


# 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

```xml
<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

```csharp
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

```csharp
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

```xml
<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

```xml
<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

```xml
<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.