MAUI

  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class SfFunnelChart

    Show / Hide Table of Contents

    Class SfFunnelChart

    Provides the funnel chart with a unique style of data representation that is more UI-visualising and user-friendly.

    Inheritance
    System.Object
    ChartBase
    SfFunnelChart
    Implements
    Microsoft.Maui.IContentView
    Microsoft.Maui.IView
    Microsoft.Maui.IElement
    Microsoft.Maui.ITransform
    Microsoft.Maui.IPadding
    Inherited Members
    ChartBase.TitleProperty
    ChartBase.LegendProperty
    ChartBase.TooltipBehaviorProperty
    ChartBase.PlotAreaBackgroundViewProperty
    ChartBase.OnBindingContextChanged()
    ChartBase.GetStreamAsync(ImageFileFormat)
    ChartBase.SaveAsImage(String)
    ChartBase.Title
    ChartBase.Legend
    ChartBase.TooltipBehavior
    ChartBase.PlotAreaBackgroundView
    Namespace: Syncfusion.Maui.Charts
    Assembly: Syncfusion.Maui.Charts.dll
    Syntax
    public class SfFunnelChart : ChartBase, IContentView, IView, IElement, ITransform, IPadding, IChart, IPyramidChartDependent, IDatapointSelectionDependent, ITooltipDependent, ITapGestureListener, IGestureListener, ITouchListener
    Remarks

    The streamlined data is displayed using a funnel chart, where each slice of the funnel indicates a process that has filtered out data.

    SfFunnelChart class allows to customize the chart elements such as legend, data label, and tooltip features.

    • MainPage.xaml
    • MainPage.xaml.cs
    • ViewModel.cs
     
    <chart:SfFunnelChart ItemsSource="{Binding Data}" 
                         XBindingPath="XValue" 
                         YBindingPath="YValue">
         <chart:SfFunnelChart.BindingContext>
             <model:ChartViewModel/>
         </chart:SfFunnelChart.BindingContext>
    </chart:SfFunnelChart>
    SfFunnelChart chart = new SfFunnelChart();
    ChartViewModel viewModel = new ChartViewModel();
    chart.ItemsSource = viewModel.Data;
    chart.XBindingPath = "XValue";
    chart.YBindingPath = "YValue";
    public ObservableCollection<Model> Data { get; set; }
    
    public ViewModel()
    {
       Data = new ObservableCollection<Model>();
       Data.Add(new Model() { XValue = "A", YValue = 18 });
       Data.Add(new Model() { XValue = "B", YValue = 34 });
       Data.Add(new Model() { XValue = "C", YValue = 52 });
       Data.Add(new Model() { XValue = "D", YValue = 68 });
       Data.Add(new Model() { XValue = "E", YValue = 100 });
    }

    Legend

    The Legend contains list of data points in chart. The information provided in each legend item helps to identify the corresponding data point in funnel chart. The chart 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.

    • MainPage.xaml
    • MainPage.xaml.cs
     
    <chart:SfFunnelChart ItemsSource = "{Binding Data}"
                         XBindingPath="XValue" 
                         YBindingPath="YValue">
      <chart:SfFunnelChart.Legend>
           <chart:ChartLegend/>
      </chart:SfFunnelChart.Legend>
    </chart:SfFunnelChart>
    SfFunnelChart chart = new SfFunnelChart();
    chart.Legend = new ChartLegend();
    ChartViewModel viewModel = new ChartViewModel();
    chart.ItemsSource = viewModel.Data;
    chart.XBindingPath = "XValue";
    chart.YBindingPath = "YValue";

    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 SfFunnelChart.

    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.

    • MainPage.xaml
    • MainPage.xaml.cs
    <chart:SfFunnelChart ItemsSource = "{Binding Data}"
                         XBindingPath="XValue" 
                         YBindingPath="YValue"
                         EnableTooltip="True">
    </chart:SfFunnelChart>
    SfFunnelChart chart = new SfFunnelChart();
    ChartViewModel viewModel = new ChartViewModel();
    chart.ItemsSource = viewModel.Data;
    chart.XBindingPath = "XValue";
    chart.YBindingPath = "YValue";
    chart.EnableTooltip=true;

    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.

    • MainPage.xaml
    • MainPage.xaml.cs
    <chart:SfFunnelChart ItemsSource="{Binding Data}" 
                         XBindingPath="XValue" 
                         YBindingPath="YValue"
                         ShowDataLabels="True">
    </chart:SfFunnelChart>
    SfFunnelChart chart = new SfFunnelChart();
    ChartViewModel viewModel = new ChartViewModel();
    chart.ItemsSource = viewModel.Data;
    chart.XBindingPath = "XValue";
    chart.YBindingPath = "YValue";
    chart.ShowDataLabels=true;

    Constructors

    SfFunnelChart()

    Initializes a new instance of the SfFunnelChart class.

    Declaration
    public SfFunnelChart()

    Fields

    DataLabelSettingsProperty

    Identifies the DataLabelSettings bindable property.

    Declaration
    public static readonly BindableProperty DataLabelSettingsProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    EnableTooltipProperty

    Identifies the EnableTooltip bindable property.

    Declaration
    public static readonly BindableProperty EnableTooltipProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    GapRatioProperty

    Identifies the GapRatio bindable property.

    Declaration
    public static readonly BindableProperty GapRatioProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    ItemsSourceProperty

    Identifies the ItemsSource bindable property.

    Declaration
    public static readonly BindableProperty ItemsSourceProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    LegendIconProperty

    Identifies the LegendIcon bindable property.

    Declaration
    public static readonly BindableProperty LegendIconProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    PaletteBrushesProperty

    Identifies the PaletteBrushes bindable property.

    Declaration
    public static readonly BindableProperty PaletteBrushesProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    SelectionBehaviorProperty

    Identifies the SelectionBehavior bindable property.

    Declaration
    public static readonly BindableProperty SelectionBehaviorProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    ShowDataLabelsProperty

    Identifies the ShowDataLabels bindable property.

    Declaration
    public static readonly BindableProperty ShowDataLabelsProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    StrokeProperty

    Identifies the Stroke bindable property.

    Declaration
    public static readonly BindableProperty StrokeProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    StrokeWidthProperty

    Identifies the StrokeWidth bindable property.

    Declaration
    public static readonly BindableProperty StrokeWidthProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    TooltipTemplateProperty

    Identifies the TooltipTemplate bindable property.

    Declaration
    public static readonly BindableProperty TooltipTemplateProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    XBindingPathProperty

    Identifies the XBindingPath bindable property.

    Declaration
    public static readonly BindableProperty XBindingPathProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    YBindingPathProperty

    Identifies the YBindingPath bindable property.

    Declaration
    public static readonly BindableProperty YBindingPathProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    Properties

    DataLabelSettings

    Gets or sets a value to customize the appearance of the displaying data labels in the chart.

    Declaration
    public FunnelDataLabelSettings DataLabelSettings { get; set; }
    Property Value
    Type Description
    FunnelDataLabelSettings

    It takes the FunnelDataLabelSettings.

    Remarks

    This allows us to customize the appearance and position of data label.

    Examples
    • MainWindow.xaml
    • MainWindow.cs
    <chart:SfFunnelChart ItemsSource="{Binding Data}" 
                         XBindingPath="XValue" 
                         YBindingPath="YValue"
                         ShowDataLabels="True">
    
        <chart:SfFunnelChart.DataLabelSettings>
            <chart:FunnelDataLabelSettings />
        </chart:SfFunnelChart.DataLabelSettings>
    
    </chart:SfFunnelChart>
    SfFunnelChart chart = new SfFunnelChart();
    
    ViewModel viewmodel = new ViewModel();
    
    chart.ItemsSource = viewmodel.Data;
    chart.XBindingPath = "XValue";
    chart.YBindingPath = "YValue";
    chart.ShowDataLabels = true;
    chart.DataLabelSettings = new FunnelDataLabelSettings();

    EnableTooltip

    Gets or sets a Boolean value indicating whether the tooltip for chart should be shown or hidden.

    Declaration
    public bool EnableTooltip { get; set; }
    Property Value
    Type Description
    System.Boolean

    Its default value is False.

    Remarks

    The tooltip will appear when you mouse over or tap on the funnel segments.

    Examples
    • MainPage.xaml
    • MainPage.xaml.cs
    <chart:SfFunnelChart ItemsSource="{Binding Data}"
                         XBindingPath="Category"
                         YBindingPath="Value"
                         EnableTooltip="True">
    </chart:SfFunnelChart>
    SfFunnelChart chart = new SfFunnelChart();
    ViewModel viewModel = new ViewModel();
    chart.ItemsSource = viewModel.Data;
    chart.XBindingPath = "Category";
    chart.YBindingPath = "Value";
    chart.EnableTooltip= true;
    
    this.Content = chart;

    GapRatio

    Gets or sets the ratio of the distance between the chart segments.

    Declaration
    public double GapRatio { get; set; }
    Property Value
    Type Description
    System.Double

    Its default value is 0. Its value ranges from 0 to 1.

    Remarks

    It is used to provide the spacing between the segments

    Examples
    • MainWindow.xaml
    • MainWindow.cs
    <chart:SfFunnelChart ItemsSource="{Binding Data}" 
                         XBindingPath="XValue" 
                         YBindingPath="YValue"
                         GapRatio="0.3">
    </chart:SfFunnelChart>
    SfFunnelChart chart = new SfFunnelChart();
    
    ViewModel viewModel = new ViewModel();
    
    chart.ItemsSource = viewModel.Data;
    chart.XBindingPath = "XValue";
    chart.YBindingPath = "YValue";
    chart.GapRatio = 0.3;

    ItemsSource

    Gets or sets a data points collection that will be used to plot a chart.

    Declaration
    public object ItemsSource { get; set; }
    Property Value
    Type Description
    System.Object

    It accepts the data points collections and its default value is null.

    Examples
    • MainWindow.xaml
    • MainWindow.cs
    <chart:SfFunnelChart ItemsSource="{Binding Data}" 
                         XBindingPath="XValue" 
                         YBindingPath="YValue">
    </chart:SfFunnelChart>
    SfFunnelChart chart = new SfFunnelChart();
    
    ViewModel viewModel = new ViewModel();
    
    chart.ItemsSource = viewModel.Data;
    chart.XBindingPath = "XValue";
    chart.YBindingPath = "YValue";

    LegendIcon

    Gets or sets a legend icon that will be displayed in the associated legend item.

    Declaration
    public ChartLegendIconType LegendIcon { get; set; }
    Property Value
    Type Description
    ChartLegendIconType

    This property takes the list of ChartLegendIconType and its default value is Circle.

    Examples
    • MainPage.xaml
    • MainPage.xaml.cs
    <chart:SfFunnelChart ItemsSource="{Binding Data}"
                         XBindingPath="Category"
                         YBindingPath="Value"
                         LegendIcon="Diamond">
       <chart:SfFunnelChart.Legend>
           <chart:ChartLegend />
       </chart:SfFunnelChart.Legend>
    </chart:SfFunnelChart>
    SfFunnelChart chart = new SfFunnelChart();
    ViewModel viewModel = new ViewModel();
    chart.Legend = new ChartLegend();
    chart.ItemsSource = viewModel.Data;
    chart.XBindingPath = "Category";
    chart.YBindingPath = "Value";
    chart.LegendIcon = ChartLegendIconType.Diamond;
    
    this.Content = chart;

    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.Maui.Controls.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
    • MainPage.xaml
    • MainPage.xaml.cs
    <chart:SfFunnelChart ItemsSource="{Binding Data}"  
                         XBindingPath="Category"
                         YBindingPath="Value"
                         PaletteBrushes="{Binding CustomBrushes}">
    </chart:SfFunnelChart>
    SfFunnelChart chart = new SfFunnelChart();
    ViewModel viewModel = new ViewModel();
    List<Brush> CustomBrushes = new List<Brush>();
    CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(77, 208, 225)));
    CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(38, 198, 218)));
    CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(0, 188, 212)));
    CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(0, 172, 193)));
    CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(0, 151, 167)));
    CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(0, 131, 143)));
    
    chart.ItemsSource = viewModel.Data;
    chart.XBindingPath = "Category";
    chart.YBindingPath = "Value";
    chart.PaletteBrushes = CustomBrushes;
    
    this.Content = chart;

    SelectionBehavior

    Gets or sets a value for initiating selection or highlighting of a single or multiple data points in the chart.

    Declaration
    public DataPointSelectionBehavior SelectionBehavior { get; set; }
    Property Value
    Type Description
    DataPointSelectionBehavior

    Its default value is null.

    Remarks

    To highlight the selected segment, set the value for the SelectionBrush property in the DataPointSelectionBehavior class.

    Examples
    • MainPage.xaml
    • MainPage.xaml.cs
    <chart:SfFunnelChart ItemsSource = "{Binding Data}"
                         XBindingPath="XValue"
                         YBindingPath="YValue">
        <chart:SfFunnelChart.SelectionBehavior>
             <chart:DataPointSelectionBehavior SelectionBrush="Red" />
        </chart:SfFunnelChart.SelectionBehavior>
    
    </chart:SfFunnelChart>
    ViewModel viewModel = new ViewModel();
    
    SfFunnelChart chart = new SfFunnelChart();
    chart.DataContext = viewModel;
    chart.ItemsSource = viewModel.Data;
    chart.XBindingPath = "XValue";
    chart.YBindingPath = "YValue";
    chart.SelectionBehavior = new DataPointSelectionBehavior()
    {
        SelectionBrush = new SolidColorBrush(Colors.Red),
    };
    See Also
    SelectedIndex
    SelectionBrush
    SelectionChanging
    SelectionChanged

    ShowDataLabels

    Gets or sets a value that indicates to enable the data labels for the chart.

    Declaration
    public bool ShowDataLabels { get; set; }
    Property Value
    Type Description
    System.Boolean

    Its default value is False.

    Examples
    • MainWindow.xaml
    • MainWindow.cs
    <chart:SfFunnelChart ItemsSource="{Binding Data}" 
                         XBindingPath="XValue" 
                         YBindingPath="YValue"
                         ShowDataLabels="True">
    </chart:SfFunnelChart>
    SfFunnelChart chart = new SfFunnelChart();
    
    ViewModel viewModel = new ViewModel();
    
    chart.ItemsSource = viewModel.Data;
    chart.XBindingPath = "XValue";
    chart.YBindingPath = "YValue";
    chart.ShowDataLabels = true;

    Stroke

    Gets or sets the color used to paint the funnel segments' outline.

    Declaration
    public Brush Stroke { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Controls.Brush

    Its default value is Transparent.

    Examples
    • MainPage.xaml
    • MainPage.xaml.cs
    <chart:SfFunnelChart ItemsSource="{Binding Data}"
                         XBindingPath="Category"
                         YBindingPath="Value"
                         Stroke="Red">
    </chart:SfFunnelChart>
    SfFunnelChart chart = new SfFunnelChart();
    ViewModel viewModel = new ViewModel();
    chart.ItemsSource = viewModel.Data;
    chart.XBindingPath = "Category";
    chart.YBindingPath = "Value";
    chart.Stroke = Colors.Red;
    
    this.Content = chart;

    StrokeWidth

    Gets or sets a value to specify the width of the stroke drawn.

    Declaration
    public double StrokeWidth { get; set; }
    Property Value
    Type Description
    System.Double

    Its default value is 2.

    Examples
    • MainPage.xaml
    • MainPage.xaml.cs
    <chart:SfFunnelChart ItemsSource="{Binding Data}"
                         XBindingPath="Category"
                         YBindingPath="Value"
                         Stroke="Red"
                         StrokeWidth="4">
    </chart:SfFunnelChart>
    SfFunnelChart chart = new SfFunnelChart();
    ViewModel viewModel = new ViewModel();
    chart.ItemsSource = viewModel.Data;
    chart.XBindingPath = "Category";
    chart.YBindingPath = "Value";
    chart.Stroke = Colors.Red;
    chart.StrokeWidth = 4;
    
    this.Content = chart;

    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.Maui.Controls.DataTemplate

    Its default value is null.

    Examples
    • MainPage.xaml
    <chart:SfFunnelChart ItemsSource="{Binding Data}"
                         XBindingPath="Category"
                         YBindingPath="Value"
                         EnableTooltip="True">
       <chart:SfFunnelChart.TooltipTemplate>
           <DataTemplate>
               <Border Background = "DarkGreen"
                       StrokeThickness="2" Stroke="Black" >
               <Label Text = "{Binding Item.YValue}"
                      TextColor="White" FontAttributes="Bold"
                      HorizontalOptions="Center" VerticalOptions="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 chart.

    Declaration
    public string XBindingPath { get; set; }
    Property Value
    Type Description
    System.String

    The string that represents the property name for the x plotting data, and its default value is null.

    Examples
    • MainWindow.xaml
    • MainWindow.cs
    <chart:SfFunnelChart ItemsSource="{Binding Data}" 
                         XBindingPath="XValue" 
                         YBindingPath="YValue">
    </chart:SfFunnelChart>
    SfFunnelChart chart = new SfFunnelChart();
    
    ViewModel viewModel = new ViewModel();
    
    chart.ItemsSource = viewModel.Data;
    chart.XBindingPath = "XValue";
    chart.YBindingPath = "YValue";

    YBindingPath

    Gets or sets a path value on the source object to serve a y value to the chart.

    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
    • MainWindow.xaml
    • MainWindow.cs
    <chart:SfFunnelChart ItemsSource="{Binding Data}" 
                         XBindingPath="XValue" 
                         YBindingPath="YValue">
    </chart:SfFunnelChart>
    SfFunnelChart chart = new SfFunnelChart();
    
    ViewModel viewModel = new ViewModel();
    
    chart.ItemsSource = viewModel.Data;
    chart.XBindingPath = "XValue";
    chart.YBindingPath = "YValue";

    Methods

    CreateSegment()

    Declaration
    protected virtual ChartSegment CreateSegment()
    Returns
    Type Description
    ChartSegment

    Implements

    Microsoft.Maui.IContentView
    Microsoft.Maui.IView
    Microsoft.Maui.IElement
    Microsoft.Maui.ITransform
    Microsoft.Maui.IPadding
    Back to top Generated by DocFX
    Copyright © 2001 - 2023 Syncfusion Inc. All Rights Reserved