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
Explode segments in a funnel chart to differentiate it from other segments.
Customize the width of the neck in a funnel chart to improve readability and appearance.
Customize the height and width of the entire WinUI funnel segments.
The WinUI Funnel Chart allows to provide a gap between the segments.
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.
Easily get started with the WinUI Funnel Charts using a few simple lines of XAML and C# code example as demonstrated below
<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),
};
}
}
Learn more about the available options to customize WinUI Funnel Charts.