WinUI Funnel Chart - Visualize Data Easily

Overview

The WinUI Funnel Chart is like a pyramid with two parts. The higher part is called the head, and the lower part is called the neck. The funnel chart is often used to represent stages in a sales process and to show the amount of potential revenue in each stage. It makes proportional comparisons between values that are showcased as progressively decreasing. The segments in the WinUI Funnel Chart can be exploded and differentiated using different colors. It supports zooming, scrolling, tooltip, trackball, and selection.

WinUI Funnel Chart documentation

Key Features

Explode Segments

Explode segments in a funnel chart to differentiate it from other segments.

Custom Neck Width

Customize the width of the neck in a funnel chart to improve readability and appearance.

Rendering Mode

Customize the height and width of the entire WinUI funnel segments.

Segment Spacing

The WinUI Funnel Chart allows to provide a gap between the segments.

Data Labels

Data labels display information about the data points. Customizing the labels foreground, border, and background. Template support to customize the default appearance with the desired view. Rotate a data label by its given angle.

Code Example

Easily get started with the WinUI Funnel Charts using a few simple lines of XAML and C# code example as demonstrated below

xaml
c#
<Window x:Class="ChartExample.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:ChartExample"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
        xmlns:chart="using:Syncfusion.UI.Xaml.Charts"
        mc:Ignorable="d"
        Title="WinUI Funnel Chart" Height="450" Width="700">
    
    <!--Setting DataContext-->
    <Window.DataContext>
        <local:ViewModel/>
    </Window.DataContext>
    
    <StackPanel>
        <chart:SfFunnelChart Height="300" Width="500"
                ItemsSource="{Binding Data}" 
                XBindingPath="Month"
                YBindingPath="Target">
        </chart:SfFunnelChart >
    </StackPanel>
</Window>
public class Model
{
    public string Month { get; set; }

    public double Target { get; set; }

    public Model(string xValue, double yValue)
    {
        Month = xValue;
        Target = yValue;
    }
}

public class ViewModel
{
    public ObservableCollection<Model> Data { get; set; }

    public ViewModel()
    {
        Data = new ObservableCollection<Model>()
        {
            new Model("Jan", 50),
            new Model("Feb", 70),
            new Model("Mar", 65),
            new Model("Apr", 57),
            new Model("May", 48), 
        };
    }
}