public class SfFunnelChart : ChartBase, IContentView, IView, IElement, ITransform, IPadding, ICrossPlatformLayout, IChart, IPyramidChartDependent, IDatapointSelectionDependent, ITooltipDependent, IDataTemplateDependent, IDrawCustomLegendIcon, ITapGestureListener, IGestureListener, ITouchListener, IParentThemeElement, IThemeElement

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
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the DataLabelSettings bindable property determines the customization options for the data labels.

EnableTooltipProperty

Identifies the EnableTooltip bindable property.

Declaration

public static readonly BindableProperty EnableTooltipProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the EnableTooltip bindable property determines whether tooltips are enabled for the funnel chart.

GapRatioProperty

Identifies the GapRatio bindable property.

Declaration

public static readonly BindableProperty GapRatioProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the GapRatio bindable property determines the gap ratio between the segments of the funnel chart.

ItemsSourceProperty

Identifies the ItemsSource bindable property.

Declaration

public static readonly BindableProperty ItemsSourceProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the ItemsSource bindable property determines the data source for the funnel chart.

LabelTemplateProperty

Identifies the LabelTemplate bindable property.

Declaration

public static readonly BindableProperty LabelTemplateProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the LabelTemplate bindable property determines the template for the data labels.

LegendIconProperty

Identifies the LegendIcon bindable property.

Declaration

public static readonly BindableProperty LegendIconProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the LegendIcon bindable property determines the legend icon type for the funnel chart.

PaletteBrushesProperty

Identifies the PaletteBrushes bindable property.

Declaration

public static readonly BindableProperty PaletteBrushesProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the PaletteBrushes bindable property determines the palette brushes for the funnel chart.

SelectionBehaviorProperty

Identifies the SelectionBehavior bindable property.

Declaration

public static readonly BindableProperty SelectionBehaviorProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the SelectionBehavior bindable property determines the selection behavior for the funnel chart.

ShowDataLabelsProperty

Identifies the ShowDataLabels bindable property.

Declaration

public static readonly BindableProperty ShowDataLabelsProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the ShowDataLabels bindable property determines whether data labels are shown on the funnel chart.

StrokeProperty

Identifies the Stroke bindable property.

Declaration

public static readonly BindableProperty StrokeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the Stroke bindable property determines the stroke color for the funnel chart segments.

StrokeWidthProperty

Identifies the StrokeWidth bindable property.

Declaration

public static readonly BindableProperty StrokeWidthProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the StrokeWidth bindable property determines the stroke width for the funnel chart segments.

TooltipTemplateProperty

Identifies the TooltipTemplate bindable property.

Declaration

public static readonly BindableProperty TooltipTemplateProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the TooltipTemplate bindable property determines the template for the funnel chart tooltip.

XBindingPathProperty

Identifies the XBindingPath bindable property.

Declaration

public static readonly BindableProperty XBindingPathProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the XBindingPath bindable property determines the binding path for the X values.

YBindingPathProperty

Identifies the YBindingPath bindable property.

Declaration

public static readonly BindableProperty YBindingPathProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the YBindingPath bindable property determines the binding path for the Y values.

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	This property takes the `bool` as its values and 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";

LabelTemplate

Gets or sets the DataTemplate that can be used to customize the appearance of the Data label.

Declaration

public DataTemplate LabelTemplate { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.DataTemplate	It accepts the Microsoft.Maui.Controls.DataTemplate value.

Examples

MainWindow.xaml
MainWindow.cs

<chart:SfFunnelChart ItemsSource="{Binding Data}" 
                     XBindingPath="XValue" 
                     YBindingPath="YValue"
                     ShowDataLabels="True">
  <chart:SfFunnelChart.LabelTemplate>
       <DataTemplate>
           <VerticalStackLayout>
                    <Image Source="image.png" 
                           WidthRequest="20" 
                           HeightRequest="20"/>
                    <Label Text="{Binding Item.YValue}" 
                           TextColor="Black"
                           FontAttributes="Bold"
                           FontSize="12"/>
            </VerticalStackLayout>
       </DataTemplate>
   </chart:SfFunnelChart.LabelTemplate>
</chart:SfFunnelChart>

SfFunnelChart chart = new SfFunnelChart();

chart.ItemsSource = new ViewModel().Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";
chart.ShowDataLabels = true;

DataTemplate labelTemplate = new DataTemplate(()=>
{
    VerticalStackLayout layout = new VerticalStackLayout();
    Image image = new Image()
    {
        Source = "image.png",
        WightRequest = 20,
        HeightRequest = 20
    };

    Label label = new Label()
    {
        TextColor = Colors.Black,
        FontAttributes = FontAttributes.Bold,
        FontSize = 12,
    }

    label.SetBinding(Label.TextProperty, new Binding("YValue"));
    layout.Children.Add(image);
    layout.Children.Add(label);
    return layout;
}    

chart.LabelTemplate = labelTemplate;

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	This property takes a 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

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	This property takes the `bool` values and 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	This property takes the Microsoft.Maui.Controls.Brush values and 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	This property takes the System.Double values and 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	It accepts a Microsoft.Maui.Controls.DataTemplate value. and 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()

Creates and initializes a new chart segment for the funnel chart.

Declaration

protected virtual ChartSegment CreateSegment()

Returns

Type
ChartSegment

Implements

Microsoft.Maui.IContentView

Microsoft.Maui.IView

Microsoft.Maui.IElement

Microsoft.Maui.ITransform

Microsoft.Maui.IPadding

Microsoft.Maui.ICrossPlatformLayout