Introducing the New .NET MAUI Pyramid Charts | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (173).NET Core  (29).NET MAUI  (203)Angular  (107)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (211)BoldSign  (13)DocIO  (24)Essential JS 2  (106)Essential Studio  (200)File Formats  (65)Flutter  (132)JavaScript  (219)Microsoft  (118)PDF  (81)Python  (1)React  (98)Streamlit  (1)Succinctly series  (131)Syncfusion  (897)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (50)Windows Forms  (61)WinUI  (68)WPF  (157)Xamarin  (161)XlsIO  (35)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (146)Chart  (127)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (63)Development  (618)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (39)Extensions  (22)File Manager  (6)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (501)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (42)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (381)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (17)Web  (582)What's new  (323)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Introducing the New .NET MAUI Pyramid Charts

Introducing the New .NET MAUI Pyramid Charts

In Essential Studio 2022 Volume 4, we have added one more data visualization tool to the Syncfusion .NET MAUI suite, the Pyramid Charts.

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

.NET MAUI Pyramid Charts
.NET MAUI Pyramid Charts

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.

Data Labels in .NET MAUI Pyramid Charts
Data Labels in .NET MAUI Pyramid Charts

Tooltip

Use the tooltip feature to display more information about data points while hovering over them. By default, the tooltip displays the value (yvalue) 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. 

Tooltip in .NET MAUI Pyramid Charts
Tooltip in .NET MAUI Pyramid Charts

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.

Legends in .NET MAUI Pyramid Charts
Legends in .NET MAUI Pyramid Charts

Note: Refer to the .NET MAUI Pyramid Charts documentation 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.

Step #2: The Syncfusion .NET MAUI controls are available on the NuGet Gallery. To add the SfPyramidChart to your project, open the NuGet package manager in Visual Studio. Search for Syncfusion.Maui.Charts and then install it.

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

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.

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

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

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

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 property. Then, bind the ProgressName and Value properties with the XBindingPath, and YBindingPath properties, respectively.

Refer to the following code example.

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

Visualizing Data Using .NET MAUI Pyramid Charts
Visualizing Data Using .NET MAUI Pyramid Charts

Supercharge your cross-platform apps with Syncfusion's robust .NET MAUI controls.

Conclusion

Thanks for reading! In this blog, we have seen the features of the new .NET MAUI Pyramid Charts, rolled out in the 2022 Volume 4 release.  Try out this stunning data visualization control and leave your feedback in the comment section below!

Check out our Release Notes and the What’s New pages to see the other updates in this release.

For questions, you can reach us through our support forumssupport portal, or feedback portal. We are always happy to assist you!

Test Flight
App Center Badge
Google Play Store Badge
Microsoft Badge
Github Store Badge

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed