How to Customize the Legend Layout in .NET MAUI Pyramid Chart?

This article provides a detailed walkthrough on how to customize the legend layout in .NET MAUI Pyramid Chart.

The SfPyramidChart supports Legend functionality, allowing you to enhance chart visualization by presenting chart data items in a legend. The layout of the legend can be customized using the ItemsLayout property in ChartLegend class.

The Legend includes the following properties:

• IsVisible - Gets or sets a value that indicates whether the legend is visible or not.
• Placement - Gets or sets the placement for the legend in a chart.
• ToggleSeriesVisibility - Gets or sets a value indicating whether the chart segment visibility is toggled by tapping the legend item.
• ItemsLayout - Gets or sets the layout configuration for the items in the chart legend.
• ItemTemplate - Gets or sets a template to customize the appearance of each legend item.
• LabelStyle - Gets or sets the value to customize the appearance of chart legend labels.

Learn step-by-step instructions and gain insights to customize the legend layout.

Step 1: Initialize the SfPyramidChart and add the title to it as follows.

XAML

  <chart:SfPyramidChart ItemsSource="{Binding Data}"
                         XBindingPath="Stage"
                         YBindingPath="Value"
                         GapRatio="0.1"
                         PaletteBrushes="{Binding CustomBrushes}">
                         
       <chart:SfPyramidChart.Title>
           <Label Text="Social Media Sharing" FontSize="17" FontAttributes="Bold" HorizontalTextAlignment="Center"/>
       </chart:SfPyramidChart.Title>
   
  </chart:SfPyramidChart>

C#

SfPyramidChart chart = new SfPyramidChart()
{
   ItemsSource = new ViewModel().Data,
   XBindingPath = "Stage",
   YBindingPath = "Value",
   GapRatio = 0.1,
   PaletteBrushes = new ViewModel().CustomBrushes
};

chart.Title = new Label
{
   Text = "Social Media Sharing",
   FontSize = 17,
   FontAttributes = FontAttributes.Bold,
   HorizontalTextAlignment = TextAlignment.Center
}; 

Step 2: Initialize the LegendExt class by inheriting from the ChartLegend class. Enhance the ChartLegend functionality by overriding the GetMaximumSizeCoefficient method to limit the legend’s maximum size and utilize the UniformItemsLayout from .NET MAUI Community Toolkit in the ItemsLayout property to organize legend items into rows and columns.

XAML

<ContentPage ....
            xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
            
   <chart:SfPyramidChart>
   
       ......
   
       <chart:SfPyramidChart.Legend>
           <local:LegendExt Placement="Right">
               <local:LegendExt.ItemsLayout>
                   <toolkit:UniformItemsLayout MaxRows="12" MaxColumns="4" WidthRequest="600" FlowDirection="LeftToRight"/>
               </local:LegendExt.ItemsLayout>
               <local:LegendExt.ItemTemplate>
                   .....
               </local:LegendExt.ItemTemplate>
           </local:LegendExt>
       </chart:SfPyramidChart.Legend>
   
   </chart:SfPyramidChart>
 
<ContentPage/> 

C#

using CommunityToolkit.Maui.Layouts;

SfPyramidChart chart = new SfPyramidChart()
{
   ......
};

var legendExt = new LegendExt
{
   Placement = LegendPlacement.Right,
   ItemsLayout = new UniformItemsLayout
       {
           MaxRows = 12,
           MaxColumns = 4,
           WidthRequest = 600,
           FlowDirection = FlowDirection.LeftToRight
       },
   ItemTemplate = new DataTemplate(() =>
   {
      ......
   })
};

chart.Legend = legendExt;

this.Content = chart; 

C#

public class LegendExt:ChartLegend
{
   protected override double GetMaximumSizeCoefficient()
   {
       return 0.7;
   }
} 

Output:

Download the complete sample from GitHub.

Conclusion:

I hope you enjoyed learning how to customize the legend layout in .NET MAUI Pyramid Chart.
You can refer to our .NET MAUI Pyramid Chart feature tour page to know about its other groundbreaking feature representations.

You can also explore our .NET MAUI Pyramid Chart documentation to understand how to present and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.

Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!