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 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 series visibility 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 in the ItemsLayout property to organize legend items into rows and columns.

XAML

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

C#

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:

Troubleshooting:

Path too long exception

If you are facing a path too long exception when building this example project, close Visual Studio and rename the repository to a shorter name before building the project.

For more details, refer to the KB on how to customize the Legend Layout in .NET MAUI Pyramid Chart.