public class SfFunnelChart : ChartBase, IContentView, IView, IElement, ITransform, IPadding, IChart, IPyramidChartDependent, IDatapointSelectionDependent, ITooltipDependent, IDrawCustomLegendIcon, 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.

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

<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),
};

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