Implementing funnel charts in .NET MAUI

<chart:SfFunnelChart Orientation="Horizontal"
                     ItemsSource="{Binding Data}"
                     XBindingPath="XValue"
                     YBindingPath="YValue">
    <!-- Chart configuration -->
</chart:SfFunnelChart>

SfFunnelChart chart = new SfFunnelChart();
chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";
chart.Orientation = ChartOrientation.Horizontal;

this.Content = chart;

<ContentPage xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts">
    
    <VerticalStackLayout Spacing="20" Padding="10">
        
        <!-- Vertical Funnel -->
        <Border Stroke="Gray" StrokeThickness="1" Padding="10">
            <VerticalStackLayout>
                <Label Text="Vertical Orientation" 
                       FontSize="16" 
                       FontAttributes="Bold"
                       HorizontalOptions="Center"/>
                <chart:SfFunnelChart ItemsSource="{Binding Data}"
                                     XBindingPath="Stage"
                                     YBindingPath="Value"
                                     Orientation="Vertical"
                                     HeightRequest="300">
                    <chart:SfFunnelChart.Legend>
                        <chart:ChartLegend Placement="Bottom"/>
                    </chart:SfFunnelChart.Legend>
                </chart:SfFunnelChart>
            </VerticalStackLayout>
        </Border>
        
        <!-- Horizontal Funnel -->
        <Border Stroke="Gray" StrokeThickness="1" Padding="10">
            <VerticalStackLayout>
                <Label Text="Horizontal Orientation" 
                       FontSize="16" 
                       FontAttributes="Bold"
                       HorizontalOptions="Center"/>
                <chart:SfFunnelChart ItemsSource="{Binding Data}"
                                     XBindingPath="Stage"
                                     YBindingPath="Value"
                                     Orientation="Horizontal"
                                     HeightRequest="300">
                    <chart:SfFunnelChart.Legend>
                        <chart:ChartLegend Placement="Right"/>
                    </chart:SfFunnelChart.Legend>
                </chart:SfFunnelChart>
            </VerticalStackLayout>
        </Border>
        
    </VerticalStackLayout>
    
</ContentPage>

<chart:SfFunnelChart GapRatio="0.2"
                     ItemsSource="{Binding Data}"
                     XBindingPath="XValue"
                     YBindingPath="YValue">
    <!-- Chart configuration -->
</chart:SfFunnelChart>

SfFunnelChart chart = new SfFunnelChart();
chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";
chart.GapRatio = 0.2;

this.Content = chart;

<chart:SfFunnelChart GapRatio="0"/>

<chart:SfFunnelChart GapRatio="0.1"/>

<chart:SfFunnelChart GapRatio="0.2"/>

<chart:SfFunnelChart GapRatio="0.5"/>

<chart:SfFunnelChart ItemsSource="{Binding Data}"
                     XBindingPath="Stage"
                     YBindingPath="Count"
                     GapRatio="0.15"
                     ShowDataLabels="True">
    
    <chart:SfFunnelChart.DataLabelSettings>
        <chart:FunnelDataLabelSettings LabelPlacement="Center">
            <chart:FunnelDataLabelSettings.LabelStyle>
                <chart:ChartDataLabelStyle FontSize="14"
                                          FontAttributes="Bold"
                                          TextColor="White"/>
            </chart:FunnelDataLabelSettings.LabelStyle>
        </chart:FunnelDataLabelSettings>
    </chart:SfFunnelChart.DataLabelSettings>
    
</chart:SfFunnelChart>

<chart:SfFunnelChart EnableLiquidGlassEffect="True"
                     EnableTooltip="True"
                     ItemsSource="{Binding Data}"
                     XBindingPath="XValue"
                     YBindingPath="YValue">
    <!-- Chart configuration -->
</chart:SfFunnelChart>

SfFunnelChart chart = new SfFunnelChart();
chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";
chart.EnableLiquidGlassEffect = true;
chart.EnableTooltip = true;

this.Content = chart;

<ContentPage xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts"
             xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core">

    <core:SfGlassEffectView CornerRadius="20"
                            Padding="12"
                            EffectType="Regular"
                            EnableShadowEffect="True">

        <chart:SfFunnelChart ItemsSource="{Binding Data}"
                             XBindingPath="XValue"
                             YBindingPath="YValue"
                             EnableLiquidGlassEffect="True"
                             EnableTooltip="True"/>

    </core:SfGlassEffectView>

</ContentPage>

using Syncfusion.Maui.Charts;
using Syncfusion.Maui.Core;

SfFunnelChart chart = new SfFunnelChart();
chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";
chart.EnableLiquidGlassEffect = true;
chart.EnableTooltip = true;

var glassView = new SfGlassEffectView
{
    CornerRadius = 20,
    Padding = 12,
    EffectType = GlassEffectType.Regular, // Regular (blurrier) or Clear (glassy)
    EnableShadowEffect = true,
    Content = chart
};

this.Content = glassView;

<ContentPage xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts"
             xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
             xmlns:model="clr-namespace:YourApp.ViewModels">

    <!-- Background Image -->
    <Grid>
        <Image Source="background_gradient.png" 
               Aspect="AspectFill"/>
        
        <core:SfGlassEffectView CornerRadius="20"
                                Padding="15"
                                Margin="20"
                                EffectType="Regular"
                                EnableShadowEffect="True"
                                VerticalOptions="Center"
                                HorizontalOptions="Center">

            <chart:SfFunnelChart ItemsSource="{Binding Data}"
                                 XBindingPath="Stage"
                                 YBindingPath="Value"
                                 EnableLiquidGlassEffect="True"
                                 EnableTooltip="True"
                                 ShowDataLabels="True"
                                 WidthRequest="400"
                                 HeightRequest="500">

                <chart:SfFunnelChart.Title>
                    <Label Text="Sales Funnel"
                           FontSize="24"
                           FontAttributes="Bold"
                           HorizontalTextAlignment="Center"/>
                </chart:SfFunnelChart.Title>

                <chart:SfFunnelChart.BindingContext>
                    <model:SalesFunnelViewModel/>
                </chart:SfFunnelChart.BindingContext>

                <chart:SfFunnelChart.Legend>
                    <chart:ChartLegend Placement="Bottom"/>
                </chart:SfFunnelChart.Legend>

            </chart:SfFunnelChart>

        </core:SfGlassEffectView>
    </Grid>

</ContentPage>

<Grid.Resources>
    <DataTemplate x:Key="glassTooltip">
        <!-- Use transparent background to show glass effect -->
        <Frame Background="Transparent" Padding="10">
            <VerticalStackLayout Spacing="5">
                <Label Text="{Binding Item.XValue}"
                       TextColor="White"
                       FontSize="16"
                       FontAttributes="Bold"/>
                <Label Text="{Binding Item.YValue, StringFormat='{0:N0}'}"
                       TextColor="White"
                       FontSize="14"/>
            </VerticalStackLayout>
        </Frame>
    </DataTemplate>
</Grid.Resources>

<chart:SfFunnelChart EnableLiquidGlassEffect="True"
                     EnableTooltip="True"
                     TooltipTemplate="{StaticResource glassTooltip}"/>

<core:SfGlassEffectView CornerRadius="20"
                        Padding="15"
                        EffectType="Clear"
                        EnableShadowEffect="True">

    <chart:SfFunnelChart ItemsSource="{Binding Data}"
                         XBindingPath="Stage"
                         YBindingPath="Value"
                         Orientation="Horizontal"
                         GapRatio="0.15"
                         EnableLiquidGlassEffect="True"
                         EnableTooltip="True"
                         ShowDataLabels="True">

        <chart:SfFunnelChart.DataLabelSettings>
            <chart:FunnelDataLabelSettings LabelPlacement="Center"/>
        </chart:SfFunnelChart.DataLabelSettings>

        <chart:SfFunnelChart.Legend>
            <chart:ChartLegend Placement="Right"/>
        </chart:SfFunnelChart.Legend>

    </chart:SfFunnelChart>

</core:SfGlassEffectView>

<chart:SfFunnelChart ItemsSource="{Binding Data}" 
                     XBindingPath="XValue"
                     YBindingPath="YValue"
                     PaletteBrushes="{Binding CustomBrushes}">
    <!-- Chart configuration -->
</chart:SfFunnelChart>

public class FunnelChartViewModel
{
    public ObservableCollection<FunnelDataModel> Data { get; set; }
    public List<Brush> CustomBrushes { get; set; }

    public FunnelChartViewModel()
    {
        // Define custom color palette
        CustomBrushes = new List<Brush>
        {
            new SolidColorBrush(Color.FromRgb(38, 198, 218)),
            new SolidColorBrush(Color.FromRgb(0, 188, 212)),
            new SolidColorBrush(Color.FromRgb(0, 172, 193)),
            new SolidColorBrush(Color.FromRgb(0, 151, 167)),
            new SolidColorBrush(Color.FromRgb(0, 131, 143))
        };

        // Initialize data
        Data = new ObservableCollection<FunnelDataModel>
        {
            new FunnelDataModel { XValue = "Prospects", YValue = 320 },
            new FunnelDataModel { XValue = "Inquiries", YValue = 290 },
            new FunnelDataModel { XValue = "Applicants", YValue = 245 },
            new FunnelDataModel { XValue = "Admits", YValue = 190 },
            new FunnelDataModel { XValue = "Enrolled", YValue = 175 }
        };
    }
}

public class FunnelDataModel
{
    public string XValue { get; set; }
    public double YValue { get; set; }
}

SfFunnelChart chart = new SfFunnelChart();
chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";

chart.PaletteBrushes = new List<Brush>
{
    new SolidColorBrush(Color.FromRgb(38, 198, 218)),
    new SolidColorBrush(Color.FromRgb(0, 188, 212)),
    new SolidColorBrush(Color.FromRgb(0, 172, 193)),
    new SolidColorBrush(Color.FromRgb(0, 151, 167)),
    new SolidColorBrush(Color.FromRgb(0, 131, 143))
};

this.Content = chart;

<chart:SfFunnelChart ItemsSource="{Binding Data}" 
                     XBindingPath="XValue"
                     YBindingPath="YValue"
                     PaletteBrushes="{Binding GradientBrushes}">
</chart:SfFunnelChart>

public class FunnelChartViewModel
{
    public ObservableCollection<FunnelDataModel> Data { get; set; }
    public List<Brush> GradientBrushes { get; set; }

    public FunnelChartViewModel()
    {
        GradientBrushes = new List<Brush>();

        // Gradient 1: Blue shades
        LinearGradientBrush gradient1 = new LinearGradientBrush();
        gradient1.GradientStops = new GradientStopCollection()
        {
            new GradientStop { Offset = 1, Color = Color.FromArgb("#a3bded") },
            new GradientStop { Offset = 0, Color = Color.FromArgb("#6991c7") }
        };

        // Gradient 2: Purple shades
        LinearGradientBrush gradient2 = new LinearGradientBrush();
        gradient2.GradientStops = new GradientStopCollection()
        {
            new GradientStop { Offset = 1, Color = Color.FromArgb("#A5678E") },
            new GradientStop { Offset = 0, Color = Color.FromArgb("#E8B7D4") }
        };

        // Gradient 3: Pink shades
        LinearGradientBrush gradient3 = new LinearGradientBrush();
        gradient3.GradientStops = new GradientStopCollection()
        {
            new GradientStop { Offset = 1, Color = Color.FromArgb("#FFCAD4") },
            new GradientStop { Offset = 0, Color = Color.FromArgb("#FB7B8E") }
        };

        // Gradient 4: Orange shades
        LinearGradientBrush gradient4 = new LinearGradientBrush();
        gradient4.GradientStops = new GradientStopCollection()
        {
            new GradientStop { Offset = 1, Color = Color.FromArgb("#FDC094") },
            new GradientStop { Offset = 0, Color = Color.FromArgb("#FFE5D8") }
        };

        // Gradient 5: Green shades
        LinearGradientBrush gradient5 = new LinearGradientBrush();
        gradient5.GradientStops = new GradientStopCollection()
        {
            new GradientStop { Offset = 1, Color = Color.FromArgb("#CFF4D2") },
            new GradientStop { Offset = 0, Color = Color.FromArgb("#56C596") }
        };

        GradientBrushes.Add(gradient1);
        GradientBrushes.Add(gradient2);
        GradientBrushes.Add(gradient3);
        GradientBrushes.Add(gradient4);
        GradientBrushes.Add(gradient5);

        // Initialize data
        Data = new ObservableCollection<FunnelDataModel>
        {
            new FunnelDataModel { XValue = "Prospects", YValue = 320 },
            new FunnelDataModel { XValue = "Inquiries", YValue = 290 },
            new FunnelDataModel { XValue = "Applicants", YValue = 245 },
            new FunnelDataModel { XValue = "Admits", YValue = 190 },
            new FunnelDataModel { XValue = "Enrolled", YValue = 175 }
        };
    }
}

SfFunnelChart chart = new SfFunnelChart();
chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";

List<Brush> gradients = new List<Brush>();

// Create gradient 1
LinearGradientBrush gradient1 = new LinearGradientBrush
{
    GradientStops = new GradientStopCollection
    {
        new GradientStop { Offset = 1, Color = Color.FromArgb("#a3bded") },
        new GradientStop { Offset = 0, Color = Color.FromArgb("#6991c7") }
    }
};

// Create gradient 2
LinearGradientBrush gradient2 = new LinearGradientBrush
{
    GradientStops = new GradientStopCollection
    {
        new GradientStop { Offset = 1, Color = Color.FromArgb("#A5678E") },
        new GradientStop { Offset = 0, Color = Color.FromArgb("#E8B7D4") }
    }
};

gradients.Add(gradient1);
gradients.Add(gradient2);
// Add more gradients as needed...

chart.PaletteBrushes = gradients;
this.Content = chart;

RadialGradientBrush radialGradient = new RadialGradientBrush
{
    Center = new Point(0.5, 0.5),
    Radius = 0.5,
    GradientStops = new GradientStopCollection
    {
        new GradientStop { Offset = 0, Color = Color.FromArgb("#FFD700") },
        new GradientStop { Offset = 1, Color = Color.FromArgb("#FFA500") }
    }
};

List<Brush> brushes = new List<Brush> { radialGradient };
chart.PaletteBrushes = brushes;

CustomBrushes = new List<Brush>
{
    new SolidColorBrush(Color.FromRgb(13, 71, 161)),   // Dark blue
    new SolidColorBrush(Color.FromRgb(25, 118, 210)),  // Medium blue
    new SolidColorBrush(Color.FromRgb(66, 165, 245)),  // Light blue
    new SolidColorBrush(Color.FromRgb(144, 202, 249)), // Lighter blue
    new SolidColorBrush(Color.FromRgb(187, 222, 251))  // Lightest blue
};

CustomBrushes = new List<Brush>
{
    new SolidColorBrush(Color.FromRgb(230, 74, 25)),   // Deep orange
    new SolidColorBrush(Color.FromRgb(244, 143, 177)), // Pink
    new SolidColorBrush(Color.FromRgb(255, 179, 0)),   // Amber
    new SolidColorBrush(Color.FromRgb(255, 213, 79)),  // Yellow
    new SolidColorBrush(Color.FromRgb(255, 238, 88))   // Light yellow
};

CustomBrushes = new List<Brush>
{
    new SolidColorBrush(Color.FromRgb(27, 94, 32)),    // Dark green
    new SolidColorBrush(Color.FromRgb(56, 142, 60)),   // Medium green
    new SolidColorBrush(Color.FromRgb(102, 187, 106)), // Light green
    new SolidColorBrush(Color.FromRgb(165, 214, 167)), // Lighter green
    new SolidColorBrush(Color.FromRgb(200, 230, 201))  // Lightest green
};

CustomBrushes = new List<Brush>
{
    new SolidColorBrush(Color.FromRgb(33, 33, 33)),    // Very dark gray
    new SolidColorBrush(Color.FromRgb(97, 97, 97)),    // Dark gray
    new SolidColorBrush(Color.FromRgb(158, 158, 158)), // Medium gray
    new SolidColorBrush(Color.FromRgb(189, 189, 189)), // Light gray
    new SolidColorBrush(Color.FromRgb(224, 224, 224))  // Very light gray
};

<ContentPage xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts"
             xmlns:model="clr-namespace:YourApp.ViewModels">

    <chart:SfFunnelChart ItemsSource="{Binding Data}" 
                         XBindingPath="Stage"
                         YBindingPath="Count"
                         PaletteBrushes="{Binding CustomBrushes}"
                         ShowDataLabels="True">

        <chart:SfFunnelChart.Title>
            <Label Text="Sales Conversion Funnel"
                   FontSize="20"
                   FontAttributes="Bold"
                   HorizontalTextAlignment="Center"/>
        </chart:SfFunnelChart.Title>

        <chart:SfFunnelChart.BindingContext>
            <model:FunnelChartViewModel/>
        </chart:SfFunnelChart.BindingContext>

        <chart:SfFunnelChart.Legend>
            <chart:ChartLegend Placement="Bottom"/>
        </chart:SfFunnelChart.Legend>

    </chart:SfFunnelChart>

</ContentPage>

public class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        SfFunnelChart chart = new SfFunnelChart();
        
        // Set title
        chart.Title = new Label
        {
            Text = "Sales Conversion Funnel",
            FontSize = 20,
            FontAttributes = FontAttributes.Bold,
            HorizontalTextAlignment = TextAlignment.Center
        };

        // Create ViewModel
        FunnelChartViewModel viewModel = new FunnelChartViewModel();
        chart.BindingContext = viewModel;

        // Bind data
        chart.ItemsSource = viewModel.Data;
        chart.XBindingPath = "Stage";
        chart.YBindingPath = "Count";

        // Apply custom colors
        chart.PaletteBrushes = viewModel.CustomBrushes;

        // Enable data labels
        chart.ShowDataLabels = true;

        // Add legend
        chart.Legend = new ChartLegend { Placement = LegendPlacement.Bottom };

        this.Content = chart;
    }
}

<chart:SfFunnelChart ShowDataLabels="True"
                     ItemsSource="{Binding Data}"
                     XBindingPath="XValue"
                     YBindingPath="YValue">
    <!-- Chart configuration -->
</chart:SfFunnelChart>

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

this.Content = chart;

<chart:SfFunnelChart ShowDataLabels="True">
    <chart:SfFunnelChart.DataLabelSettings>
        <chart:FunnelDataLabelSettings LabelPlacement="Outer" 
                                       Context="XValue" 
                                       UseSeriesPalette="True"/>
    </chart:SfFunnelChart.DataLabelSettings>
</chart:SfFunnelChart>

chart.ShowDataLabels = true;
chart.DataLabelSettings = new FunnelDataLabelSettings()
{
    LabelPlacement = DataLabelPlacement.Outer,
    Context = FunnelDataLabelContext.XValue,
    UseSeriesPalette = true
};

<chart:FunnelDataLabelSettings LabelPlacement="Auto"/>

<chart:FunnelDataLabelSettings LabelPlacement="Inner"/>

chart.DataLabelSettings = new FunnelDataLabelSettings()
{
    LabelPlacement = DataLabelPlacement.Inner
};

<chart:FunnelDataLabelSettings LabelPlacement="Center"/>

chart.DataLabelSettings = new FunnelDataLabelSettings()
{
    LabelPlacement = DataLabelPlacement.Center
};

<chart:FunnelDataLabelSettings LabelPlacement="Outer"/>

chart.DataLabelSettings = new FunnelDataLabelSettings()
{
    LabelPlacement = DataLabelPlacement.Outer
};

<chart:FunnelDataLabelSettings Context="YValue"/>

chart.DataLabelSettings = new FunnelDataLabelSettings()
{
    Context = FunnelDataLabelContext.YValue
};

<chart:FunnelDataLabelSettings Context="XValue"/>

chart.DataLabelSettings = new FunnelDataLabelSettings()
{
    Context = FunnelDataLabelContext.XValue
};

<chart:FunnelDataLabelSettings UseSeriesPalette="True"/>

chart.DataLabelSettings = new FunnelDataLabelSettings()
{
    UseSeriesPalette = true
};

<chart:SfFunnelChart ShowDataLabels="True">
    <chart:SfFunnelChart.DataLabelSettings>
        <chart:FunnelDataLabelSettings LabelPlacement="Outer">
            <chart:FunnelDataLabelSettings.LabelStyle>
                <chart:ChartDataLabelStyle Margin="5"
                                          FontSize="14"
                                          TextColor="Black"
                                          FontAttributes="Bold"/>
            </chart:FunnelDataLabelSettings.LabelStyle>
        </chart:FunnelDataLabelSettings>
    </chart:SfFunnelChart.DataLabelSettings>
</chart:SfFunnelChart>

<chart:ChartDataLabelStyle Margin="8"
                          FontSize="16"
                          TextColor="White"
                          FontAttributes="Bold"
                          Background="#2196F3"
                          Stroke="#1976D2"
                          StrokeWidth="2"
                          CornerRadius="8"/>

ChartDataLabelStyle labelStyle = new ChartDataLabelStyle()
{
    Margin = 8,
    FontSize = 16,
    TextColor = Colors.White,
    FontAttributes = FontAttributes.Bold,
    Background = new SolidColorBrush(Color.FromArgb("#2196F3")),
    Stroke = new SolidColorBrush(Color.FromArgb("#1976D2")),
    StrokeWidth = 2,
    CornerRadius = new CornerRadius(8)
};

chart.DataLabelSettings = new FunnelDataLabelSettings()
{
    LabelPlacement = DataLabelPlacement.Outer,
    LabelStyle = labelStyle
};

<chart:SfFunnelChart ShowDataLabels="True"
                     ItemsSource="{Binding Data}"
                     XBindingPath="Stage"
                     YBindingPath="Count">
    
    <chart:SfFunnelChart.DataLabelSettings>
        <chart:FunnelDataLabelSettings LabelPlacement="Outer" 
                                       Context="YValue" 
                                       UseSeriesPalette="True">
            <chart:FunnelDataLabelSettings.LabelStyle>
                <chart:ChartDataLabelStyle Margin="5"
                                          FontSize="14"
                                          TextColor="White"
                                          FontAttributes="Bold"/>
            </chart:FunnelDataLabelSettings.LabelStyle>
        </chart:FunnelDataLabelSettings>
    </chart:SfFunnelChart.DataLabelSettings>
    
</chart:SfFunnelChart>

SfFunnelChart chart = new SfFunnelChart();
chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "Stage";
chart.YBindingPath = "Count";
chart.ShowDataLabels = true;

ChartDataLabelStyle labelStyle = new ChartDataLabelStyle()
{
    Margin = 3,
    FontSize = 12,
    TextColor = Colors.White,
    Background = new SolidColorBrush(Colors.Black.WithAlpha(0.7f)),
    CornerRadius = new CornerRadius(4)
};

chart.DataLabelSettings = new FunnelDataLabelSettings()
{
    LabelPlacement = DataLabelPlacement.Inner,
    Context = FunnelDataLabelContext.YValue,
    LabelStyle = labelStyle
};

this.Content = chart;

<chart:SfFunnelChart ShowDataLabels="True">
    <chart:SfFunnelChart.DataLabelSettings>
        <chart:FunnelDataLabelSettings LabelPlacement="Center" 
                                       Context="XValue">
            <chart:FunnelDataLabelSettings.LabelStyle>
                <chart:ChartDataLabelStyle FontSize="16"
                                          TextColor="White"
                                          FontAttributes="Bold"/>
            </chart:FunnelDataLabelSettings.LabelStyle>
        </chart:FunnelDataLabelSettings>
    </chart:SfFunnelChart.DataLabelSettings>
</chart:SfFunnelChart>

chart.ShowDataLabels = true;

ChartDataLabelStyle labelStyle = new ChartDataLabelStyle()
{
    Margin = 6,
    FontSize = 15,
    TextColor = Colors.Black,
    FontAttributes = FontAttributes.Bold,
    Background = new SolidColorBrush(Colors.White),
    Stroke = new SolidColorBrush(Colors.Gray),
    StrokeWidth = 1,
    CornerRadius = new CornerRadius(6)
};

chart.DataLabelSettings = new FunnelDataLabelSettings()
{
    LabelPlacement = DataLabelPlacement.Auto,
    Context = FunnelDataLabelContext.YValue,
    LabelStyle = labelStyle
};

SfFunnelChart chart = new SfFunnelChart();
chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";

this.Content = chart;

// Export as PNG (default)
chart.SaveAsImage("FunnelChart.png");

SfFunnelChart chart = new SfFunnelChart();
chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";

this.Content = chart;

// Export as JPEG
chart.SaveAsImage("FunnelChart.jpeg");

<ContentPage xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts">
    <VerticalStackLayout>
        
        <chart:SfFunnelChart x:Name="funnelChart"
                             ItemsSource="{Binding Data}"
                             XBindingPath="Stage"
                             YBindingPath="Value">
            <chart:SfFunnelChart.Title>
                <Label Text="Sales Funnel"/>
            </chart:SfFunnelChart.Title>
        </chart:SfFunnelChart>
        
        <HorizontalStackLayout Spacing="10" Padding="10">
            <Button Text="Export as PNG" 
                    Clicked="OnExportAsPngClicked"/>
            <Button Text="Export as JPEG" 
                    Clicked="OnExportAsJpegClicked"/>
        </HorizontalStackLayout>
        
    </VerticalStackLayout>
</ContentPage>

private void OnExportAsPngClicked(object sender, EventArgs e)
{
    funnelChart.SaveAsImage("SalesFunnel.png");
    DisplayAlert("Success", "Chart exported as PNG", "OK");
}

private void OnExportAsJpegClicked(object sender, EventArgs e)
{
    funnelChart.SaveAsImage("SalesFunnel.jpeg");
    DisplayAlert("Success", "Chart exported as JPEG", "OK");
}

<manifest>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
</manifest>

<application android:requestLegacyExternalStorage="true">

<dict>
    <key>NSPhotoLibraryUsageDescription</key>    
    <string>This app needs permission to access Photos</string>    
    <key>NSPhotoLibraryAddUsageDescription</key>    
    <string>This app needs permission to save charts to Photos</string> 
</dict>

Task<Stream> GetStreamAsync(ImageFileFormat format)

SfFunnelChart chart = new SfFunnelChart();
chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";

this.Content = chart;

// Get chart as PNG stream
Stream chartStream = await chart.GetStreamAsync(ImageFileFormat.Png);

private async Task ExportChartToCustomLocationAsync()
{
    try
    {
        // Get chart as stream
        Stream chartStream = await funnelChart.GetStreamAsync(ImageFileFormat.Png);
        
        // Define custom file path
        string fileName = $"FunnelChart_{DateTime.Now:yyyyMMdd_HHmmss}.png";
        string filePath = Path.Combine(FileSystem.AppDataDirectory, fileName);
        
        // Write stream to file
        using (FileStream fileStream = File.Create(filePath))
        {
            await chartStream.CopyToAsync(fileStream);
        }
        
        await DisplayAlert("Success", $"Chart saved to: {filePath}", "OK");
    }
    catch (Exception ex)
    {
        await DisplayAlert("Error", $"Failed to export: {ex.Message}", "OK");
    }
}

private async Task UploadChartToServerAsync()
{
    try
    {
        // Get chart as JPEG stream
        Stream chartStream = await funnelChart.GetStreamAsync(ImageFileFormat.Jpeg);
        
        // Create multipart form content
        using (var content = new MultipartFormDataContent())
        {
            var streamContent = new StreamContent(chartStream);
            streamContent.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("image/jpeg");
            content.Add(streamContent, "chart", "funnel-chart.jpeg");
            
            // Upload to server
            using (var httpClient = new HttpClient())
            {
                var response = await httpClient.PostAsync("https://api.example.com/upload", content);
                
                if (response.IsSuccessStatusCode)
                {
                    await DisplayAlert("Success", "Chart uploaded successfully", "OK");
                }
            }
        }
    }
    catch (Exception ex)
    {
        await DisplayAlert("Error", $"Upload failed: {ex.Message}", "OK");
    }
}

private async Task EmbedChartInPdfAsync()
{
    try
    {
        // Get chart as PNG stream
        Stream chartStream = await funnelChart.GetStreamAsync(ImageFileFormat.Png);
        
        // Use a PDF library (e.g., Syncfusion PDF, iTextSharp)
        // This is a conceptual example
        
        // Convert stream to byte array
        using (MemoryStream ms = new MemoryStream())
        {
            await chartStream.CopyToAsync(ms);
            byte[] chartBytes = ms.ToArray();
            
            // Create PDF and embed image
            // (Implementation depends on your PDF library)
            
            await DisplayAlert("Success", "Chart embedded in PDF", "OK");
        }
    }
    catch (Exception ex)
    {
        await DisplayAlert("Error", $"PDF generation failed: {ex.Message}", "OK");
    }
}

private async Task ShareChartAsync()
{
    try
    {
        // Get chart as stream
        Stream chartStream = await funnelChart.GetStreamAsync(ImageFileFormat.Png);
        
        // Save to temporary file
        string fileName = "FunnelChart.png";
        string filePath = Path.Combine(FileSystem.CacheDirectory, fileName);
        
        using (FileStream fileStream = File.Create(filePath))
        {
            await chartStream.CopyToAsync(fileStream);
        }
        
        // Share using .NET MAUI Share API
        await Share.RequestAsync(new ShareFileRequest
        {
            Title = "Share Funnel Chart",
            File = new ShareFile(filePath)
        });
    }
    catch (Exception ex)
    {
        await DisplayAlert("Error", $"Sharing failed: {ex.Message}", "OK");
    }
}

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts"
             xmlns:model="clr-namespace:YourApp.ViewModels">

    <Grid RowDefinitions="*, Auto">
        
        <!-- Chart -->
        <chart:SfFunnelChart x:Name="funnelChart"
                             Grid.Row="0"
                             ItemsSource="{Binding Data}"
                             XBindingPath="Stage"
                             YBindingPath="Value"
                             ShowDataLabels="True">
            
            <chart:SfFunnelChart.Title>
                <Label Text="Sales Conversion Funnel" 
                       FontSize="20" 
                       FontAttributes="Bold"/>
            </chart:SfFunnelChart.Title>
            
            <chart:SfFunnelChart.BindingContext>
                <model:SalesFunnelViewModel/>
            </chart:SfFunnelChart.BindingContext>
            
            <chart:SfFunnelChart.Legend>
                <chart:ChartLegend Placement="Bottom"/>
            </chart:SfFunnelChart.Legend>
            
        </chart:SfFunnelChart>
        
        <!-- Export Controls -->
        <VerticalStackLayout Grid.Row="1" 
                            Padding="15" 
                            Spacing="10"
                            BackgroundColor="LightGray">
            
            <Label Text="Export Options" 
                   FontSize="16" 
                   FontAttributes="Bold"/>
            
            <HorizontalStackLayout Spacing="10">
                <Button Text="Save as PNG" 
                        Clicked="OnSaveAsPngClicked"
                        BackgroundColor="DodgerBlue"/>
                <Button Text="Save as JPEG" 
                        Clicked="OnSaveAsJpegClicked"
                        BackgroundColor="DodgerBlue"/>
                <Button Text="Share" 
                        Clicked="OnShareClicked"
                        BackgroundColor="Green"/>
            </HorizontalStackLayout>
            
        </VerticalStackLayout>
        
    </Grid>

</ContentPage>

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    private void OnSaveAsPngClicked(object sender, EventArgs e)
    {
        try
        {
            string fileName = $"FunnelChart_{DateTime.Now:yyyyMMdd_HHmmss}.png";
            funnelChart.SaveAsImage(fileName);
            DisplayAlert("Success", $"Chart saved as {fileName}", "OK");
        }
        catch (Exception ex)
        {
            DisplayAlert("Error", $"Failed to save: {ex.Message}", "OK");
        }
    }

    private void OnSaveAsJpegClicked(object sender, EventArgs e)
    {
        try
        {
            string fileName = $"FunnelChart_{DateTime.Now:yyyyMMdd_HHmmss}.jpeg";
            funnelChart.SaveAsImage(fileName);
            DisplayAlert("Success", $"Chart saved as {fileName}", "OK");
        }
        catch (Exception ex)
        {
            DisplayAlert("Error", $"Failed to save: {ex.Message}", "OK");
        }
    }

    private async void OnShareClicked(object sender, EventArgs e)
    {
        try
        {
            // Get chart as stream
            Stream chartStream = await funnelChart.GetStreamAsync(ImageFileFormat.Png);
            
            // Save to cache
            string fileName = "FunnelChart.png";
            string filePath = Path.Combine(FileSystem.CacheDirectory, fileName);
            
            using (FileStream fileStream = File.Create(filePath))
            {
                await chartStream.CopyToAsync(fileStream);
            }
            
            // Share
            await Share.RequestAsync(new ShareFileRequest
            {
                Title = "Share Funnel Chart",
                File = new ShareFile(filePath)
            });
        }
        catch (Exception ex)
        {
            await DisplayAlert("Error", $"Sharing failed: {ex.Message}", "OK");
        }
    }
}

dotnet add package Syncfusion.Maui.Charts

Install-Package Syncfusion.Maui.Charts

using Syncfusion.Maui.Core.Hosting;

namespace MyCardApp
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            
            // Register Syncfusion Core - REQUIRED!
            builder.ConfigureSyncfusionCore();
            
            builder
                .UseMauiApp<App>()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                });

            return builder.Build();
        }
    }
}

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts">
    <!-- Chart goes here -->
</ContentPage>

using Syncfusion.Maui.Charts;

<ContentPage xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts">
    <chart:SfFunnelChart/>
</ContentPage>

using Syncfusion.Maui.Charts;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        
        SfFunnelChart chart = new SfFunnelChart();
        this.Content = chart;
    }
}

public class FunnelDataModel
{
    public string XValue { get; set; }
    public double YValue { get; set; }
}

public class SalesFunnelViewModel
{
    public List<FunnelDataModel> Data { get; set; }

    public SalesFunnelViewModel()
    {
        Data = new List<FunnelDataModel>()
        {
            new FunnelDataModel { XValue = "Prospects", YValue = 320 },
            new FunnelDataModel { XValue = "Inquiries", YValue = 290 },
            new FunnelDataModel { XValue = "Applicants", YValue = 245 },
            new FunnelDataModel { XValue = "Admits", YValue = 190 },
            new FunnelDataModel { XValue = "Enrolled", YValue = 175 }
        };
    }
}

<ContentPage xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts"
             xmlns:model="clr-namespace:YourNamespace.ViewModels">

    <chart:SfFunnelChart ItemsSource="{Binding Data}" 
                         XBindingPath="XValue" 
                         YBindingPath="YValue">
        
        <chart:SfFunnelChart.BindingContext>
            <model:SalesFunnelViewModel/>
        </chart:SfFunnelChart.BindingContext>
        
    </chart:SfFunnelChart>
    
</ContentPage>

SfFunnelChart chart = new SfFunnelChart();
SalesFunnelViewModel viewModel = new SalesFunnelViewModel();
chart.BindingContext = viewModel;

chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";

this.Content = chart;

<chart:SfFunnelChart ItemsSource="{Binding Data}" 
                     XBindingPath="XValue" 
                     YBindingPath="YValue">
    
    <chart:SfFunnelChart.Title>
        <Label Text="School Admission Funnel"/>
    </chart:SfFunnelChart.Title>
    
</chart:SfFunnelChart>

chart.Title = new Label()
{
    Text = "School Admission Funnel"
};

<chart:SfFunnelChart ItemsSource="{Binding Data}" 
                     XBindingPath="XValue" 
                     YBindingPath="YValue"
                     ShowDataLabels="True"
                     EnableTooltip="True">
    <!-- Other chart configurations -->
</chart:SfFunnelChart>

chart.ShowDataLabels = true;
chart.EnableTooltip = true;

<chart:SfFunnelChart ItemsSource="{Binding Data}" 
                     XBindingPath="XValue" 
                     YBindingPath="YValue">
    
    <chart:SfFunnelChart.Legend>
        <chart:ChartLegend/>
    </chart:SfFunnelChart.Legend>
    
</chart:SfFunnelChart>

chart.Legend = new ChartLegend();

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FunnelChartDemo.MainPage"
             xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts"
             xmlns:model="clr-namespace:FunnelChartDemo.ViewModels">

    <chart:SfFunnelChart ItemsSource="{Binding Data}" 
                         XBindingPath="XValue" 
                         YBindingPath="YValue"
                         ShowDataLabels="True" 
                         EnableTooltip="True">

        <chart:SfFunnelChart.Title>
            <Label Text="School Admission Funnel"/>
        </chart:SfFunnelChart.Title>

        <chart:SfFunnelChart.BindingContext>
            <model:SalesFunnelViewModel/>
        </chart:SfFunnelChart.BindingContext>

        <chart:SfFunnelChart.Legend>
            <chart:ChartLegend/>
        </chart:SfFunnelChart.Legend>

    </chart:SfFunnelChart>

</ContentPage>

using Syncfusion.Maui.Charts;

namespace FunnelChartDemo;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        
        SfFunnelChart chart = new SfFunnelChart();
        
        chart.Title = new Label { Text = "School Admission Funnel" };
        chart.Legend = new ChartLegend();
        
        SalesFunnelViewModel viewModel = new SalesFunnelViewModel();
        chart.BindingContext = viewModel;
        
        chart.ItemsSource = viewModel.Data;
        chart.XBindingPath = "XValue";
        chart.YBindingPath = "YValue";
        chart.EnableTooltip = true;
        chart.ShowDataLabels = true;
        
        this.Content = chart;
    }
}

using System.Collections.Generic;

namespace FunnelChartDemo.ViewModels
{
    public class SalesFunnelViewModel
    {
        public List<FunnelDataModel> Data { get; set; }

        public SalesFunnelViewModel()
        {
            Data = new List<FunnelDataModel>()
            {
                new FunnelDataModel { XValue = "Prospects", YValue = 320 },
                new FunnelDataModel { XValue = "Inquiries", YValue = 290 },
                new FunnelDataModel { XValue = "Applicants", YValue = 245 },
                new FunnelDataModel { XValue = "Admits", YValue = 190 },
                new FunnelDataModel { XValue = "Enrolled", YValue = 175 }
            };
        }
    }

    public class FunnelDataModel
    {
        public string XValue { get; set; }
        public double YValue { get; set; }
    }
}

<chart:SfFunnelChart ItemsSource="{Binding Data}" 
                     XBindingPath="XValue"
                     YBindingPath="YValue">
    <chart:SfFunnelChart.Legend>
        <chart:ChartLegend/>
    </chart:SfFunnelChart.Legend>
</chart:SfFunnelChart>

SfFunnelChart chart = new SfFunnelChart()
{
    ItemsSource = new ViewModel().Data,
    XBindingPath = "XValue",
    YBindingPath = "YValue",
};

chart.Legend = new ChartLegend();
this.Content = chart;

<chart:SfFunnelChart>
    <chart:SfFunnelChart.Legend>
        <chart:ChartLegend IsVisible="True"/>
    </chart:SfFunnelChart.Legend>
</chart:SfFunnelChart>

chart.Legend = new ChartLegend()
{ 
    IsVisible = true 
};

<chart:SfFunnelChart ItemsSource="{Binding Data}" 
                     XBindingPath="XValue"
                     YBindingPath="YValue">
    <chart:SfFunnelChart.Legend>
        <chart:ChartLegend>
            <chart:ChartLegend.LabelStyle>
                <chart:ChartLegendLabelStyle TextColor="Blue" 
                                            Margin="5" 
                                            FontSize="18" 
                                            FontAttributes="Bold" 
                                            FontFamily="PlaywriteAR-Regular"/>
            </chart:ChartLegend.LabelStyle>
        </chart:ChartLegend>
    </chart:SfFunnelChart.Legend>
</chart:SfFunnelChart>

SfFunnelChart chart = new SfFunnelChart()
{
    XBindingPath = "XValue",
    YBindingPath = "YValue",
    ItemsSource = new ViewModel().Data,
};

chart.Legend = new ChartLegend();
ChartLegendLabelStyle labelStyle = new ChartLegendLabelStyle()
{
    TextColor = Colors.Blue,
    FontSize = 18,
    FontAttributes = FontAttributes.Bold,
    Margin = 5,
    FontFamily = "PlaywriteAR-Regular"
};
chart.Legend.LabelStyle = labelStyle;

this.Content = chart;

<chart:SfFunnelChart ItemsSource="{Binding Data}" 
                     XBindingPath="XValue"
                     YBindingPath="YValue"
                     LegendIcon="Diamond">
    <chart:SfFunnelChart.Legend>
        <chart:ChartLegend/>
    </chart:SfFunnelChart.Legend>
</chart:SfFunnelChart>

SfFunnelChart chart = new SfFunnelChart()
{
    ItemsSource = new ViewModel().Data,
    XBindingPath = "XValue",
    YBindingPath = "YValue",
    LegendIcon = ChartLegendIconType.Diamond
};
chart.Legend = new ChartLegend();

this.Content = chart;

<chart:SfFunnelChart ItemsSource="{Binding Data}" 
                     XBindingPath="XValue"  
                     YBindingPath="YValue">
    <chart:SfFunnelChart.Legend>
        <chart:ChartLegend Placement="Bottom"/>
    </chart:SfFunnelChart.Legend>
</chart:SfFunnelChart>

SfFunnelChart chart = new SfFunnelChart()
{
    XBindingPath = "XValue",
    YBindingPath = "YValue",
    ItemsSource = new ViewModel().Data,
};
   
chart.Legend = new ChartLegend()
{ 
    Placement = LegendPlacement.Bottom 
};

this.Content = chart;

<chart:SfFunnelChart ItemsSource="{Binding Data}" 
                     XBindingPath="XValue"  
                     YBindingPath="YValue">
    <chart:SfFunnelChart.Legend>
        <chart:ChartLegend Placement="Right"
                           IsFloating="True" 
                           OffsetX="-250" 
                           OffsetY="-100"/>
    </chart:SfFunnelChart.Legend>
</chart:SfFunnelChart>

SfFunnelChart chart = new SfFunnelChart()
{
    XBindingPath = "XValue",
    YBindingPath = "YValue",
    ItemsSource = new ViewModel().Data,
};
   
chart.Legend = new ChartLegend()
{ 
    Placement = LegendPlacement.Top,
    IsFloating = true,
    OffsetX = -170,
    OffsetY = 30
};

this.Content = chart;

<chart:SfFunnelChart ItemsSource="{Binding Data}" 
                     XBindingPath="XValue"         
                     YBindingPath="YValue">
    <chart:SfFunnelChart.Legend>
        <chart:ChartLegend ToggleSeriesVisibility="True"/>
    </chart:SfFunnelChart.Legend>
</chart:SfFunnelChart>

SfFunnelChart chart = new SfFunnelChart()
{
    ItemsSource = viewModel.Data,
    XBindingPath = "XValue",
    YBindingPath = "YValue"
};

chart.Legend = new ChartLegend()
{
    ToggleSeriesVisibility = true
};

this.Content = chart;

<chart:SfFunnelChart>
    <chart:SfFunnelChart.Legend>
        <local:LegendExt/>
    </chart:SfFunnelChart.Legend>
</chart:SfFunnelChart>

public class LegendExt : ChartLegend
{
    protected override double GetMaximumSizeCoefficient()
    {
        return 0.7; // Legend can use up to 70% of chart area
    }
}

// Usage
SfFunnelChart chart = new SfFunnelChart();
chart.Legend = new LegendExt();
this.Content = chart;

<chart:SfFunnelChart ItemsSource="{Binding Data}" 
                     XBindingPath="XValue"  
                     YBindingPath="YValue">
    <chart:SfFunnelChart.Legend>
        <chart:ChartLegend>
            <chart:ChartLegend.ItemsLayout>
                <FlexLayout Wrap="Wrap" WidthRequest="400"/>
            </chart:ChartLegend.ItemsLayout>
        </chart:ChartLegend>
    </chart:SfFunnelChart.Legend>
</chart:SfFunnelChart>

SfFunnelChart chart = new SfFunnelChart()
{
    ItemsSource = new ViewModel().Data,
    XBindingPath = "XValue",
    YBindingPath = "YValue",
};

ChartLegend legend = new ChartLegend();
legend.ItemsLayout = new FlexLayout()
{
    Wrap = FlexWrap.Wrap,
    WidthRequest = 400
};

chart.Legend = legend;
this.Content = chart;

ChartLegend legend = new ChartLegend();
Grid grid = new Grid
{
    ColumnDefinitions =
    {
        new ColumnDefinition { Width = GridLength.Auto },
        new ColumnDefinition { Width = GridLength.Auto }
    }
};
legend.ItemsLayout = grid;
chart.Legend = legend;

<chart:SfFunnelChart ItemsSource="{Binding Data}" 
                     x:Name="chart"
                     XBindingPath="XValue"  
                     YBindingPath="YValue">
    
    <chart:SfFunnelChart.Resources>
        <DataTemplate x:Key="legendTemplate">
            <StackLayout Orientation="Horizontal">
                <Rectangle HeightRequest="12" 
                           WidthRequest="12" 
                           Margin="3"
                           Background="{Binding IconBrush}"/>
                <Label Text="{Binding XValue}" 
                       Margin="3"
                       VerticalOptions="Center"/>
            </StackLayout>
        </DataTemplate>
    </chart:SfFunnelChart.Resources>  
    
    <chart:SfFunnelChart.Legend>
        <chart:ChartLegend ItemTemplate="{StaticResource legendTemplate}"/>
    </chart:SfFunnelChart.Legend>
    
</chart:SfFunnelChart>

SfFunnelChart chart = new SfFunnelChart()
{
    ItemsSource = new ViewModel().Data,
    XBindingPath = "XValue",
    YBindingPath = "YValue",
};
     
ChartLegend legend = new ChartLegend();
legend.ItemTemplate = chart.Resources["legendTemplate"] as DataTemplate;
chart.Legend = legend;

this.Content = chart;

<chart:SfFunnelChart>
    <chart:SfFunnelChart.Legend>
        <chart:ChartLegend LegendItemCreated="OnLegendItemCreated"/>
    </chart:SfFunnelChart.Legend>
</chart:SfFunnelChart>

private void OnLegendItemCreated(object sender, LegendItemEventArgs e)
{
    // Customize the first legend item
    if (e.LegendItem.Index == 0)
    {
        e.LegendItem.IconBrush = new SolidColorBrush(Colors.Red);
        e.LegendItem.FontSize = 16;
        e.LegendItem.FontAttributes = FontAttributes.Bold;
    }
    
    // Make specific items stand out
    if (e.LegendItem.Text == "Prospects")
    {
        e.LegendItem.TextColor = Colors.Green;
        e.LegendItem.IconType = ChartLegendIconType.Diamond;
    }
}

<chart:SfFunnelChart ItemsSource="{Binding Data}"
                     XBindingPath="Stage"
                     YBindingPath="Value"
                     LegendIcon="Pentagon">
    
    <chart:SfFunnelChart.Legend>
        <chart:ChartLegend Placement="Bottom">
            <chart:ChartLegend.LabelStyle>
                <chart:ChartLegendLabelStyle FontSize="14"
                                            FontAttributes="Bold"
                                            TextColor="DarkSlateGray"
                                            Margin="8"/>
            </chart:ChartLegend.LabelStyle>
        </chart:ChartLegend>
    </chart:SfFunnelChart.Legend>
    
</chart:SfFunnelChart>

chart.Legend = new ChartLegend()
{
    Placement = LegendPlacement.Right,
    IsFloating = true,
    OffsetX = -200,
    OffsetY = -80,
    ToggleSeriesVisibility = true
};

<DataTemplate x:Key="customLegendTemplate">
    <Border Padding="8"
            Background="LightGray"
            Stroke="Gray"
            StrokeThickness="1">
        <StackLayout Orientation="Horizontal" Spacing="8">
            <BoxView Color="{Binding IconBrush}" 
                     WidthRequest="16" 
                     HeightRequest="16"
                     CornerRadius="8"/>
            <Label Text="{Binding Text}" 
                   FontSize="14"
                   FontAttributes="Bold"
                   VerticalOptions="Center"/>
        </StackLayout>
    </Border>
</DataTemplate>

<chart:SfFunnelChart EnableTooltip="True"
                     ItemsSource="{Binding Data}"
                     XBindingPath="XValue"
                     YBindingPath="YValue">
    <!-- Chart configuration -->
</chart:SfFunnelChart>

SfFunnelChart chart = new SfFunnelChart();
chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";
chart.EnableTooltip = true;

this.Content = chart;

<chart:SfFunnelChart EnableTooltip="True">
    <chart:SfFunnelChart.TooltipBehavior>
        <chart:ChartTooltipBehavior Duration="4"
                                   Background="LightBlue"
                                   TextColor="Black"
                                   FontSize="14"
                                   FontAttributes="Bold"
                                   Margin="10"/>
    </chart:SfFunnelChart.TooltipBehavior>
</chart:SfFunnelChart>

SfFunnelChart chart = new SfFunnelChart();
chart.EnableTooltip = true;

chart.TooltipBehavior = new ChartTooltipBehavior()
{
    Duration = 4,
    Background = new SolidColorBrush(Colors.LightBlue),
    TextColor = Colors.Black,
    FontSize = 14,
    FontAttributes = FontAttributes.Bold,
    Margin = new Thickness(10)
};

this.Content = chart;

<Grid x:Name="grid">
    <Grid.Resources>
        <DataTemplate x:Key="tooltipTemplate">
            <StackLayout Orientation="Horizontal">
                <Label Text="{Binding Item.XValue}"
                       TextColor="White"
                       FontAttributes="Bold"
                       HorizontalOptions="Center"
                       VerticalOptions="Center"/>
                <Label Text="{Binding Item.YValue, StringFormat=': {0}'}"
                       TextColor="White"
                       FontAttributes="Bold"
                       HorizontalOptions="Center"
                       VerticalOptions="Center"/>
            </StackLayout>
        </DataTemplate>
    </Grid.Resources>

    <chart:SfFunnelChart EnableTooltip="True"
                         TooltipTemplate="{StaticResource tooltipTemplate}">
        <!-- Chart configuration -->
    </chart:SfFunnelChart>
</Grid>

SfFunnelChart chart = new SfFunnelChart();
chart.EnableTooltip = true;
chart.TooltipTemplate = grid.Resources["tooltipTemplate"] as DataTemplate;

this.Content = chart;

<DataTemplate x:Key="simpleTooltip">
    <Frame Background="#2C3E50" 
           Padding="12" 
           CornerRadius="8"
           HasShadow="True">
        <Label Text="{Binding Item.YValue, StringFormat='Value: {0:N0}'}"
               TextColor="White"
               FontSize="16"
               FontAttributes="Bold"/>
    </Frame>
</DataTemplate>

<DataTemplate x:Key="detailedTooltip">
    <Border Background="White"
            Stroke="Gray"
            StrokeThickness="1"
            Padding="15">
        <VerticalStackLayout Spacing="8">
            <Label Text="{Binding Item.XValue}"
                   FontSize="18"
                   FontAttributes="Bold"
                   TextColor="Black"/>
            <BoxView HeightRequest="1" 
                     Background="LightGray"/>
            <HorizontalStackLayout Spacing="5">
                <Label Text="Count:"
                       FontSize="14"
                       TextColor="Gray"/>
                <Label Text="{Binding Item.YValue, StringFormat='{0:N0}'}"
                       FontSize="14"
                       FontAttributes="Bold"
                       TextColor="Black"/>
            </HorizontalStackLayout>
        </VerticalStackLayout>
    </Border>
</DataTemplate>

<DataTemplate x:Key="iconTooltip">
    <Grid Background="#34495E" 
          Padding="12">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        
        <!-- Icon placeholder -->
        <BoxView Grid.Column="0"
                 WidthRequest="24"
                 HeightRequest="24"
                 Background="{Binding IconBrush}"
                 CornerRadius="12"
                 Margin="0,0,10,0"/>
        
        <VerticalStackLayout Grid.Column="1" Spacing="4">
            <Label Text="{Binding Item.XValue}"
                   TextColor="White"
                   FontSize="14"
                   FontAttributes="Bold"/>
            <Label Text="{Binding Item.YValue, StringFormat='{0:N0} users'}"
                   TextColor="LightGray"
                   FontSize="12"/>
        </VerticalStackLayout>
    </Grid>
</DataTemplate>

public DataTemplate CreateCustomTooltipTemplate()
{
    return new DataTemplate(() =>
    {
        var frame = new Frame
        {
            BackgroundColor = Color.FromArgb("#16A085"),
            Padding = new Thickness(15),
            CornerRadius = 10,
            HasShadow = true
        };

        var stackLayout = new VerticalStackLayout { Spacing = 5 };

        var stageLabel = new Label
        {
            FontSize = 16,
            FontAttributes = FontAttributes.Bold,
            TextColor = Colors.White
        };
        stageLabel.SetBinding(Label.TextProperty, "Item.XValue");

        var valueLabel = new Label
        {
            FontSize = 14,
            TextColor = Colors.White
        };
        valueLabel.SetBinding(Label.TextProperty, new Binding("Item.YValue", stringFormat: "Count: {0:N0}"));

        stackLayout.Children.Add(stageLabel);
        stackLayout.Children.Add(valueLabel);
        frame.Content = stackLayout;

        return frame;
    });
}

// Usage
chart.TooltipTemplate = CreateCustomTooltipTemplate();

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts"
             xmlns:model="clr-namespace:YourApp.ViewModels">

    <Grid x:Name="grid">
        <Grid.Resources>
            <DataTemplate x:Key="tooltipTemplate">
                <Frame Background="#2980B9" 
                       Padding="12" 
                       CornerRadius="8">
                    <VerticalStackLayout Spacing="5">
                        <Label Text="{Binding Item.XValue}"
                               TextColor="White"
                               FontSize="16"
                               FontAttributes="Bold"/>
                        <Label Text="{Binding Item.YValue, StringFormat='Value: {0:N0}'}"
                               TextColor="White"
                               FontSize="14"/>
                    </VerticalStackLayout>
                </Frame>
            </DataTemplate>
        </Grid.Resources>

        <chart:SfFunnelChart ItemsSource="{Binding Data}"
                             XBindingPath="Stage"
                             YBindingPath="Count"
                             EnableTooltip="True"
                             TooltipTemplate="{StaticResource tooltipTemplate}">

            <chart:SfFunnelChart.BindingContext>
                <model:SalesFunnelViewModel/>
            </chart:SfFunnelChart.BindingContext>

            <chart:SfFunnelChart.TooltipBehavior>
                <chart:ChartTooltipBehavior Duration="3"/>
            </chart:SfFunnelChart.TooltipBehavior>

        </chart:SfFunnelChart>
    </Grid>

</ContentPage>

using Syncfusion.Maui.Charts;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        Grid grid = new Grid();
        
        // Create custom tooltip template
        DataTemplate tooltipTemplate = new DataTemplate(() =>
        {
            var frame = new Frame
            {
                BackgroundColor = Color.FromArgb("#2980B9"),
                Padding = new Thickness(12),
                CornerRadius = 8
            };

            var stackLayout = new VerticalStackLayout { Spacing = 5 };

            var stageLabel = new Label
            {
                FontSize = 16,
                FontAttributes = FontAttributes.Bold,
                TextColor = Colors.White
            };
            stageLabel.SetBinding(Label.TextProperty, "Item.XValue");

            var valueLabel = new Label
            {
                FontSize = 14,
                TextColor = Colors.White
            };
            valueLabel.SetBinding(Label.TextProperty, 
                new Binding("Item.YValue", stringFormat: "Value: {0:N0}"));

            stackLayout.Children.Add(stageLabel);
            stackLayout.Children.Add(valueLabel);
            frame.Content = stackLayout;

            return frame;
        });

        // Create chart
        SfFunnelChart chart = new SfFunnelChart();
        SalesFunnelViewModel viewModel = new SalesFunnelViewModel();
        chart.BindingContext = viewModel;

        chart.ItemsSource = viewModel.Data;
        chart.XBindingPath = "Stage";
        chart.YBindingPath = "Count";
        chart.EnableTooltip = true;
        chart.TooltipTemplate = tooltipTemplate;

        chart.TooltipBehavior = new ChartTooltipBehavior
        {
            Duration = 3
        };

        grid.Children.Add(chart);
        this.Content = grid;
    }
}