Introducing the New .NET MAUI Funnel Charts
Tags: dotnet, csharp, maui, mobile
Published: 2023-01-10 13:32:00

---
title: Introducing the New .NET MAUI Funnel Charts
published: true
date: 2023-01-05 09:58:37 UTC
tags: dotnet, csharp, maui, mobile
canonical_url: https://www.syncfusion.com/blogs/post/dotnet-maui-funnel-charts.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/02x3tm1or2k7mmhlju8i.png
---
Are you looking for a tool to visualize data and show progress through a series of steps or stages?

Then our new [.NET MAUI Funnel Charts](https://www.syncfusion.com/maui-controls/maui-funnel-charts "Syncfusion .NET MAUI Funnel Charts") is the ultimate choice!

The .NET MAUI Funnel Charts (SfFunnelChart) is an efficient tool for visualizing data flow from one stage to the next and identifying areas where progress might be slower or faster than expected. You can easily create and customize it to satisfy your specific needs.

This component was part of the Syncfusion [Essential Studio 2022 Volume 4](https://www.syncfusion.com/forums/179561/essential-studio-2022-volume-4-main-release-v20-4-0-38-is-available-for-download "Essential Studio 2022 Volume 4") release.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/NET-MAUI-Funnel-Charts.png" alt=".NET MAUI Funnel Charts" style="width:100%">

  <figcaption>.NET MAUI Funnel Charts</figcaption>

</figure>
In this blog, we will see the features of the .NET MAUI Funnel Charts and the steps to get started with it!

## Features of .NET MAUI Funnel Charts

### Data Labels

One of the Funnel Charts’ key features is its ability to display data labels with custom placement options. You can place the labels inside or outside of the funnel segments. This makes it easy to focus on the most important information and quickly identify the trends and patterns in the data.

The data labels smartly align themselves in space-constrained scenarios based on space availability. Thus, they improve the user experience and readability.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Data-Labels-in-.NET-MAUI-Funnel-Charts.png" alt="Data Labels in .NET MAUI Funnel Charts" style="width:100%">

  <figcaption>Data Labels in .NET MAUI Funnel Charts</figcaption>

</figure>
### Tooltip

We can display information about each funnel segment while hovering over it using the tooltip feature. By default, the tooltip displays the value of each stage in the funnel.

With the help of the **TooltipTemplate** support, this can be customized to show other information using any .NET MAUI View control.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Tooltip-in-.NET-MAUI-Funnel-Charts.gif" alt="Tooltip in .NET MAUI Funnel Charts" style="width:100%">

  <figcaption>Tooltip in .NET MAUI Funnel Charts</figcaption>

</figure>
### Legend

The Funnel Charts supports rendering a legend next to the funnel to display information about each segment or stage. By default, the legend will appear with the names of the funnel stages. You can customize it with any .NET MAUI view control using the **ItemTemplate** support.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Legends-in-.NET-MAUI-Funnel-Charts.png" alt="Legends in .NET MAUI Funnel Charts" style="width:100%">

  <figcaption>Legends in .NET MAUI Funnel Charts</figcaption>

</figure>
**Note:** Refer to the [.NET MAUI Funnel Charts documentation](https://help.syncfusion.com/maui/funnel-charts/overview "Documentation: Overview of .NET MAUI Funnel Charts") to see its other available features.

## Getting started with .NET MAUI Funnel Charts

Let’s see how to get started with the .NET MAUI Funnel Charts and populate it with data in your application.

**Step 1:** First, create [a .NET MAUI application](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?view=net-maui-7.0&tabs=vswin&pivots=devices-android "Build your first .NET MAUI app documentation").

**Step 2:** Syncfusion .NET MAUI components are available in the [NuGet Gallery](https://www.nuget.org/ "NuGet Gallery"). To add the **SfFunnelChart** to your project, open the **NuGet package manager** in [Visual Studio](https://visualstudio.microsoft.com/ "Visual Studio"). Search for **[Syncfusion.Maui.Charts](https://www.nuget.org/packages/Syncfusion.Maui.Charts/ "Syncfusion.Maui.Charts NuGet Package")**, and then install it.

**Step 3** : Now, register the handler for the Syncfusion core in the **MauiProgram.cs** file. Refer to the following code.

```csharp
public static class MauiProgram
{
  public static MauiApp CreateMauiApp()
  {
      var builder = MauiApp.CreateBuilder();
      builder
	.UseMauiApp<App>()
	.ConfigureSyncfusionCore()
	.ConfigureFonts(fonts =>
         {
            fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
         });
      builder.ConfigureSampleBrowserBase();      
      return builder.Build();
 }
}
```

**Step 4** : Import the **Syncfusion.Maui.Charts** namespace in your XAML page.

```xml
xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts">
```

**Step 5** : Then, initialize an empty funnel chart like in the following code.

```xml
<chart:SfFunnelChart/>
```

**Step 6** : Create a business model to populate items in the Funnel Charts. This includes creating the example **Model** class and **ChartViewModel** with the list of data objects.

```csharp
public class Model
{
    public string ProgressName { get; set; }
    public double Value { get; set; }    
}

public class ChartViewModel
{
    public ObservableCollection Data { get; set; }

    public ChartViewModel()
    {
        Data = new ObservableCollection()
        {
          new Model(){ProgressName = "Process A", Value = 50},
          new Model(){ProgressName = "Process B", Value = 20},
          new Model(){ProgressName = "Process C", Value = 15},
          new Model(){ProgressName = "Process D", Value = 5},
        };
    }
}
```

**Step 7:** Finally, set the **BindingContext** to the **ChartViewModel**. Bind the data to the Funnel Charts’ [**ItemsSource**](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfFunnelChart.html#Syncfusion_Maui_Charts_SfFunnelChart_ItemsSourceProperty "ItemsSource property of .NET MAUI Funnel Charts") property. Then, bind the **ProgressName** and **Value** properties with the **XBindingPath,** and **YBindingPath** properties **,** respectively.

```xml
<chart:SfFunnelChart ItemsSource="{Binding Data}" 
                       XBindingPath="ProgressName" 
                       YBindingPath="Value">
    <chart:SfFunnelChart.BindingContext>
        <local:ChartViewModel/>
    </chart:SfFunnelChart.BindingContext>
</chart:SfFunnelChart>
```

After executing these code examples, our funnel chart will look like the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Visualizing-Data-Using-.NET-MAUI-Funnel-Charts.png" alt="Visualizing Data Using .NET MAUI Funnel Charts" style="width:100%">

  <figcaption>Visualizing Data Using .NET MAUI Funnel Charts</figcaption>

</figure>
## Conclusion

Thanks for reading! In this blog, we have seen the features of the new [.NET MAUI Funnel Charts](https://www.syncfusion.com/maui-controls/maui-funnel-charts "Syncfusion .NET MAUI Funnel Charts") rolled out in the [2022 Volume 4](https://www.syncfusion.com/forums/179561/essential-studio-2022-volume-4-main-release-v20-4-0-38-is-available-for-download "Essential Studio 2022 Volume 4") release. Information on other release enhancements is available on our [Release Notes](https://www.syncfusion.com/products/release-history "Syncfusion Release History") and [What’s New](https://www.syncfusion.com/products/whatsnew "What’s New in Syncfusion Products") pages. Try them out to visualize your data elegantly with better readability!

For questions, you can reach us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forums"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Syncfusion Essential Studio 2022 Volume 4 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2022-volume-4-is-here.aspx "Blog: Syncfusion Essential Studio 2022 Volume 4 Is Here!")
- [Syncfusion .NET MAUI 2023 Roadmap](https://www.syncfusion.com/blogs/post/syncfusion-net-maui-2023-roadmap.aspx "Blog: Syncfusion .NET MAUI 2023 Roadmap")
- [Introducing the Sixth Set of .NET MAUI Controls](https://www.syncfusion.com/blogs/post/introducing-the-sixth-set-of-net-maui-controls.aspx "Blog: Introducing the Sixth Set of .NET MAUI Controls")
- [Introducing the New .NET MAUI Rating Control](https://www.syncfusion.com/blogs/post/dotnet-maui-rating-control.aspx "Blog: Introducing the New .NET MAUI Rating Control")