Class SfFunnelChart
Renders funnel chart for more user-friendly data representation and greater UI visualization.
Implements
Inherited Members
Namespace: Syncfusion.UI.Xaml.Charts
Assembly: Syncfusion.Chart.WinUI.dll
Syntax
public class SfFunnelChart : ChartBase, IDisposable, INotifyPropertyChanged
Remarks
Funnel chart control is used to analyze the various stages in a process.
SfFunnelChart class allows to customize the chart elements such as legend, data label, and tooltip features.
Legend
The Legend contains list of data points in chart series. The information provided in each legend item helps to identify the corresponding data point in chart series. The Series XBindingPath property value will be displayed in the associated legend item.
To render a legend, create an instance of ChartLegend, and assign it to the Legend property.
<chart:SfFunnelChart ItemsSource = "{Binding Data}" XBindingPath="XValue" YBindingPath="YValue">
<chart:SfFunnelChart.DataContext>
<local:ViewModel/>
</chart:SfFunnelChart.DataContext>
<chart:SfFunnelChart.Legend>
<chart:ChartLegend/>
</chart:SfFunnelChart.Legend>
</chart:SfFunnelChart>
Tooltip
Tooltip displays information while tapping or mouse hover on the segment. To display the tooltip on the chart, you need to set the EnableTooltip property as true in ChartSeries.
To customize the appearance of the tooltip elements like Background, TextColor and Font, create an instance of ChartTooltipBehavior class, modify the values, and assign it to the chart’s TooltipBehavior property.
<chart:SfFunnelChart EnableTooltip = "True"
ItemsSource="{Binding Data}"
XBindingPath="XValue"
YBindingPath="YValue">
<chart:SfFunnelChart.DataContext>
<local:ViewModel/>
</chart:SfFunnelChart.DataContext>
<chart:SfFunnelChart.TooltipBehavior>
<chart:ChartTooltipBehavior/>
</chart:SfFunnelChart.TooltipBehavior>
</chart:SfFunnelChart>
Data Label
Data labels are used to display values related to a chart segment. To render the data labels, you need to enable the ShowDataLabels property as true in SfFunnelChart class.
To customize the chart data labels alignment, placement and label styles, need to create an instance of FunnelDataLabelSettings and set to the DataLabelSettings property.
<chart:SfFunnelChart ShowDataLabels = "True"
ItemsSource="{Binding Data}"
XBindingPath="XValue"
YBindingPath="YValue">
<chart:SfFunnelChart.DataContext>
<local:ViewModel/>
</chart:SfFunnelChart.DataContext>
</chart:SfFunnelChart>
Constructors
SfFunnelChart()
Initializes a new instance of the SfFunnelChart.
Declaration
public SfFunnelChart()
Fields
DataLabelSettingsProperty
Identifies the DataLabelSettings dependency property.
Declaration
public static readonly DependencyProperty DataLabelSettingsProperty
Field Value
Type | Description |
---|---|
Microsoft.UI.Xaml.DependencyProperty | The identifier for |
EnableTooltipProperty
Identifies the EnableTooltip
dependency property.
Declaration
public static readonly DependencyProperty EnableTooltipProperty
Field Value
Type | Description |
---|---|
Microsoft.UI.Xaml.DependencyProperty | The identifier for |
ExplodeIndexProperty
Identifies the ExplodeIndex
dependency property.
Declaration
public static readonly DependencyProperty ExplodeIndexProperty
Field Value
Type | Description |
---|---|
Microsoft.UI.Xaml.DependencyProperty | The identifier for |
ExplodeOffsetProperty
Identifies the ExplodeOffset
dependency property.
Declaration
public static readonly DependencyProperty ExplodeOffsetProperty
Field Value
Type | Description |
---|---|
Microsoft.UI.Xaml.DependencyProperty | The identifier for |
ExplodeOnTapProperty
Identifies the ExplodeOnTap
dependency property.
Declaration
public static readonly DependencyProperty ExplodeOnTapProperty
Field Value
Type | Description |
---|---|
Microsoft.UI.Xaml.DependencyProperty | The identifier for |
GapRatioProperty
Identifies the GapRatio
dependency property.
Declaration
public static readonly DependencyProperty GapRatioProperty
Field Value
Type | Description |
---|---|
Microsoft.UI.Xaml.DependencyProperty | The identifier for |
ItemsSourceProperty
Identifies the ItemsSource
dependency property.
Declaration
public static readonly DependencyProperty ItemsSourceProperty
Field Value
Type | Description |
---|---|
Microsoft.UI.Xaml.DependencyProperty | The identifier for |
MinimumWidthProperty
Identifies the MinimumWidth
dependency property.
Declaration
public static readonly DependencyProperty MinimumWidthProperty
Field Value
Type | Description |
---|---|
Microsoft.UI.Xaml.DependencyProperty | The identifier for |
ModeProperty
Identifies the Mode
dependency property.
Declaration
public static readonly DependencyProperty ModeProperty
Field Value
Type | Description |
---|---|
Microsoft.UI.Xaml.DependencyProperty | The identifier for |
PaletteBrushesProperty
Declaration
public static readonly DependencyProperty PaletteBrushesProperty
Field Value
Type |
---|
Microsoft.UI.Xaml.DependencyProperty |
SelectionBehaviorProperty
The DependencyProperty for SelectionBehavior property. .
Declaration
public static readonly DependencyProperty SelectionBehaviorProperty
Field Value
Type |
---|
Microsoft.UI.Xaml.DependencyProperty |
ShowDataLabelsProperty
Identifies the ShowDataLabels dependency property.
Declaration
public static readonly DependencyProperty ShowDataLabelsProperty
Field Value
Type | Description |
---|---|
Microsoft.UI.Xaml.DependencyProperty | The identifier for |
TooltipTemplateProperty
Identifies the TooltipTemplate
dependency property.
Declaration
public static readonly DependencyProperty TooltipTemplateProperty
Field Value
Type | Description |
---|---|
Microsoft.UI.Xaml.DependencyProperty | The identifier for |
XBindingPathProperty
Identifies the XBindingPath
dependency property.
Declaration
public static readonly DependencyProperty XBindingPathProperty
Field Value
Type | Description |
---|---|
Microsoft.UI.Xaml.DependencyProperty | The identifier for |
YBindingPathProperty
Identifies the YBindingPath
dependency property.
Declaration
public static readonly DependencyProperty YBindingPathProperty
Field Value
Type | Description |
---|---|
Microsoft.UI.Xaml.DependencyProperty | The identifier for |
Properties
DataLabelSettings
Gets or sets a value to customize the appearance of the displaying data labels in the funnel chart.
Declaration
public FunnelDataLabelSettings DataLabelSettings { get; set; }
Property Value
Type | Description |
---|---|
FunnelDataLabelSettings | It takes the FunnelDataLabelSettings. |
Remarks
This allows us to change the look of the displaying labels' content, shapes, and connector lines at the data point.
Examples
<chart:SfFunnelChart ItemsSource="{Binding Data}"
XBindingPath="XValue"
YBindingPath="YValue"
ShowDataLabels="True">
<chart:SfFunnelChart.DataLabelSettings>
<chart:FunnelDataLabelSettings />
</chart:SfFunnelChart.DataLabelSettings>
<!--omitted for brevity-->
</chart:SfFunnelChart>
EnableTooltip
Gets or sets a value indicating whether the tooltip for the series should be shown or hidden.
Declaration
public bool EnableTooltip { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | It accepts bool values, and its default value is |
Remarks
The series tooltip will appear when you click or tap the series area.
Examples
<chart:SfFunnelChart ItemsSource="{Binding Data}"
XBindingPath="XValue"
YBindingPath="YValue"
EnableTooltip="True">
<!--omitted for brevity-->
</chart:SfFunnelChart>
ExplodeIndex
Gets or sets a value that can be used to explode any specific segment.
Declaration
public int ExplodeIndex { get; set; }
Property Value
Type | Description |
---|---|
System.Int32 | It accepts integer values, and its default value is -1. |
Examples
<chart:SfFunnelChart ItemsSource="{Binding Data}"
XBindingPath="XValue"
YBindingPath="YValue"
ExplodeIndex ="1">
<!--omitted for brevity-->
</chart:SfFunnelChart>
ExplodeOffset
Gets or sets the distance from the origination positions where the segment is exploded when the ExplodeIndex value is given.
Declaration
public double ExplodeOffset { get; set; }
Property Value
Type | Description |
---|---|
System.Double | It accepts double values, and its default value is 40. |
Examples
<chart:SfFunnelChart ItemsSource="{Binding Data}"
XBindingPath="XValue"
YBindingPath="YValue"
ExplodeOffset="50">
<!--omitted for brevity-->
</chart:SfFunnelChart>
ExplodeOnTap
Gets or sets the value that indicates whether segment slices will explode when clicked or tapped.
Declaration
public bool ExplodeOnTap { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | It accepts bool values, and its default value is false. |
Remarks
The segment will explode when you click or tap it.
Examples
<chart:SfFunnelChart ItemsSource="{Binding Data}"
XBindingPath="XValue"
YBindingPath="YValue"
ExplodeOnTap ="True">
<!--omitted for brevity-->
</chart:SfFunnelChart>
GapRatio
Gets or sets the ratio of the distance between the funnel segment blocks.
Declaration
public double GapRatio { get; set; }
Property Value
Type | Description |
---|---|
System.Double | It accepts double values, and its default value is 0. Its value ranges from 0 to 1. |
Remarks
It is used to provide the spacing between the segments
Examples
<chart:SfFunnelChart ItemsSource="{Binding Data}"
XBindingPath="XValue"
YBindingPath="YValue"
GapRatio="0.5">
<!--omitted for brevity-->
</chart:SfFunnelChart>
ItemsSource
Gets or sets a collection of data points that will be used to generate a chart.
Declaration
public object ItemsSource { get; set; }
Property Value
Type |
---|
System.Object |
Examples
<chart:SfFunnelChart ItemsSource="{Binding Data}"
XBindingPath="XValue"
YBindingPath="YValue">
<!--omitted for brevity-->
</chart:SfFunnelChart>
MinimumWidth
Gets or sets the minimum width that can be used to customize the funnel chart's neck width.
Declaration
public double MinimumWidth { get; set; }
Property Value
Type | Description |
---|---|
System.Double | This property accepts a double value and has a default value of 40. |
Examples
<chart:SfFunnelChart ItemsSource = "{Binding Data}"
XBindingPath="XValue"
YBindingPath="YValue"
MinimumWidth ="50">
<!--omitted for brevity-->
</chart:SfFunnelChart>
Mode
Gets or sets a value indicating whether the y-value should interpret the length or surface of the funnel block.
Declaration
public ChartFunnelMode Mode { get; set; }
Property Value
Type | Description |
---|---|
ChartFunnelMode | It accepts ChartFunnelMode values and its default value is ValueIsHeight. |
Examples
<chart:SfFunnelChart ItemsSource="{Binding Data}"
XBindingPath="XValue"
YBindingPath="YValue"
Mode="ValueIsHeight">
<!--omitted for brevity-->
</chart:SfFunnelChart>
PaletteBrushes
Gets or sets the list of brushes that can be used to customize the appearance of the chart.
Declaration
public IList<Brush> PaletteBrushes { get; set; }
Property Value
Type | Description |
---|---|
System.Collections.Generic.IList<Microsoft.UI.Xaml.Media.Brush> | This property accepts a list of brushes as input and comes with a set of predefined brushes by default. |
Remarks
It allows custom brushes, and gradient brushes to customize the appearance.
Examples
<Grid>
<Grid.Resources>
<BrushCollection x:Key="customBrushes">
<SolidColorBrush Color="#4dd0e1"/>
<SolidColorBrush Color="#26c6da"/>
<SolidColorBrush Color="#00bcd4"/>
<SolidColorBrush Color="#00acc1"/>
<SolidColorBrush Color="#0097a7"/>
<SolidColorBrush Color="#00838f"/>
</BrushCollection>
</Grid.Resources>
<chart:SfFunnelChart ItemsSource="{Binding Data}"
XBindingPath="Category"
YBindingPath="Value"
PaletteBrushes="{StaticResource customBrushes}">
</chart:SfFunnelChart>
</Grid>
SelectionBehavior
Gets or sets a selection behavior that enables you to select or highlight a segment in a series.
Declaration
public DataPointSelectionBehavior SelectionBehavior { get; set; }
Property Value
Type | Description |
---|---|
DataPointSelectionBehavior | This property takes the DataPointSelectionBehavior instance as a value, and its default value is null. |
Remarks
To highlight the selected segment, set the value for the SelectionBrush property in the DataPointSelectionBehavior class.
Examples
<chart:SfFunnelChart ItemsSource = "{Binding Data}" XBindingPath="XValue" YBindingPath="YValue">
<!--omitted for brevity-->
<chart:SfFunnelChart.SelectionBehavior>
<chart:DataPointSelectionBehavior SelectionBrush="Red" />
</chart:SfFunnelChart.SelectionBehavior>
</chart:SfFunnelChart>
See Also
ShowDataLabels
Gets or sets a value indicating whether the data labels for the funnel chart should be enabled.
Declaration
public bool ShowDataLabels { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | It takes the bool value, and its default value is false. |
Examples
<chart:SfFunnelChart ItemsSource="{Binding Data}"
XBindingPath="XValue"
YBindingPath="YValue"
ShowDataLabels="True">
<!--omitted for brevity-->
</chart:SfFunnelChart>
TooltipTemplate
Gets or sets the DataTemplate that can be used to customize the appearance of the tooltip.
Declaration
public DataTemplate TooltipTemplate { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.UI.Xaml.DataTemplate | This accepts a Microsoft.UI.Xaml.DataTemplate value. |
Examples
<chart:SfFunnelChart ItemsSource="{Binding Data}"
XBindingPath="XValue"
YBindingPath="YValue"
EnableTooltip="True" >
<chart:SfFunnelChart.TooltipTemplate>
<DataTemplate>
<Border Background = "DarkGreen"
CornerRadius="5"
BorderThickness="2"
BorderBrush="Black"
Width="50" Height="30">
<TextBlock Text = "{Binding Item.YValue}"
Foreground="White"
FontWeight="Bold"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
</DataTemplate>
</chart:SfFunnelChart.TooltipTemplate>
</chart:SfFunnelChart>
XBindingPath
Gets or sets a path value on the source object to serve a x value to the series.
Declaration
public string XBindingPath { get; set; }
Property Value
Type | Description |
---|---|
System.String | The string that represents the property name for the primary axis and its default value is null. |
Examples
<chart:SfFunnelChart ItemsSource="{Binding Data}"
XBindingPath="XValue"
YBindingPath="YValue">
<!--omitted for brevity-->
</chart:SfFunnelChart>
YBindingPath
Gets or sets a path value on the source object to serve a y value to the series.
Declaration
public string YBindingPath { get; set; }
Property Value
Type | Description |
---|---|
System.String | The string that represents the property name for the y plotting data, and its default value is null. |
Examples
<chart:SfFunnelChart ItemsSource="{Binding Data}"
XBindingPath="XValue"
YBindingPath="YValue">
<!--omitted for brevity-->
</chart:SfFunnelChart>
Methods
OnApplyTemplate()
Declaration
protected override void OnApplyTemplate()