Introducing the New .NET MAUI Pyramid Charts
Tags: csharp, dotnet, maui, android
Published: 2023-01-10 13:22:38

---
title: Introducing the New .NET MAUI Pyramid Charts
published: true
date: 2023-01-10 12:26:50 UTC
tags: csharp, dotnet, maui, android
canonical_url: https://www.syncfusion.com/blogs/post/dotnet-maui-pyramid-charts.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b4qccf7ykwqm6obdsf9q.png
---
In [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 Main Release"), we have added one more data visualization tool to the Syncfusion [.NET MAUI](https://www.syncfusion.com/maui-controls "Syncfusion .NET MAUI controls") suite, the Pyramid Charts.

The new [.NET MAUI Pyramid Charts](https://www.syncfusion.com/maui-controls/maui-pyramid-charts "Syncfusion .NET MAUI Pyramid Charts") is a powerful data visualization tool. It allows developers to concisely show hierarchical relationships among data. It is an excellent choice for displaying data hierarchies, such as showing the division of a total into its parts or visualizing the composition of a population.
<figure>

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

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

</figure>

In this blog, we will explore the features of the new .NET MAUI Pyramid Charts and the steps to get started with it.

## Features of .NET MAUI Pyramid Charts

### Data labels

You can display data labels with various placement options in the Pyramid Charts. Place the data labels inside or outside of the pyramid segments. This makes it easy to focus on the significant information and quickly identify the breakdown.

In space-constrained scenarios, the data labels smartly align themselves based on the available space, thus improving the user experience and readability.
<figure>

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

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

</figure>

### Tooltip

Use the tooltip feature to display more information about data points while hovering over them. By default, the tooltip displays the value (y-value) of each segment of the pyramid.

With the help of the **TooltipTemplate** support, we can customize tooltips to show different information using any .NET MAUI view control. 
<figure>

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

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

</figure>

### Legend

Render a legend next to your Pyramid Charts. By default, the legend items will appear with the names of the pyramid segments. You can customize the legend with any .NET MAUI view control using the **ItemTemplate** support.
<figure>

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

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

</figure>

**Note:** Refer to the [.NET MAUI Pyramid Charts documentation](https://help.syncfusion.com/maui/pyramid-charts/getting-started "Getting Started with .NET MAUI Pyramid Charts") to know its other available features.

## Getting started with .NET MAUI Pyramid Charts

This section explains the steps to getting started with the new .NET MAUI Pyramid Charts and populating it with data.

**Step #1:** First, [create a simple .NET MAUI project](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").

**Step #2:** The Syncfusion .NET MAUI controls are available on the [NuGet Gallery](https://www.nuget.org/ "NuGet Gallery"). To add the  **SfPyramidChart**  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** : Then, register the handler for 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** : Next, import the **Syncfusion.Maui.Charts** namespace on your XAML page.

```csharp
xmlns:chart= “clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts”
```

**Step #5** : Initialize an empty Pyramid Charts control like in the following code.

```xml
<chart:SfPyramidChart/>
```

**Step #6** : Create a business model to populate items in the Pyramid Charts. This includes the creation of the example **ChartDataModel** class and **ChartViewModel** with the list of data objects.

```csharp
public class ChartDataModel
{
   public string ProgressName { get; set; }
   public double Value { get; set; }    
}
public class ChartViewModel
{
   public ObservableCollection<ChartDataModel> Data { get; set; }
   public ChartViewModel()
   {
     Data = new ObservableCollection<ChartDataModel>
     {
        new ChartDataModel("Retail",14),
        new ChartDataModel("Manufacturing",14.25),
        new ChartDataModel("Marketing",17.82),
        new ChartDataModel("Shipping",22.51),
        new ChartDataModel("R&D",28.71)
    };
  }
}
```

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

Refer to the following code example.

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

```

After executing these code samples, we will get output like the following image.
<figure>

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

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

</figure>

## Conclusion

Thanks for reading! In this blog, we have seen the features of the new [.NET MAUI Pyramid Charts](https://www.syncfusion.com/maui-controls/maui-pyramid-charts "Syncfusion .NET MAUI Pyramid 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 Main Release") release.  Try out this stunning data visualization control and leave your feedback in the comment section below!

Check out our [Release Notes](https://www.syncfusion.com/products/release-history "Syncfusion Release History") and the [What’s New](https://www.syncfusion.com/products/whatsnew "What’s New in Syncfusion Products") pages to see the other updates in this release.

For questions, you can reach us through our [support forums](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/maui "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!")
- [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")
- [Syncfusion .NET MAUI 2023 Roadmap](https://www.syncfusion.com/blogs/post/syncfusion-net-maui-2023-roadmap.aspx "Blog: Syncfusion .NET MAUI 2023 Roadmap")