How to align the chart legend items in .NET MAUI Circular Chart?

Syncfusion .NET MAUI Circular Chart offer versatile options for customizing the alignment of legend items, ensuring that charts are not only informative but also aesthetically pleasing.

This article demonstrates how to align legend items based on the desired position using the ItemsLayout property in the ChartLegend class and how to specify the maximum size of the legend by overriding the GetMaximumSizeCoefficient method.

Aligning Legend Items by Wrap
To display all legend items neatly, you can use the FlexLayout to wrap them. This is particularly useful when dealing with numerous legend items that would otherwise require scrolling. By specifying the Wrap layout, you ensure all items are visible and accessible.
XAML

<chart:SfCircularChart>
    <chart:SfCircularChart.Legend>
      <local:LegendExt Placement="Bottom">
            <local:LegendExt.ItemsLayout>
                <FlexLayout WidthRequest="600" Wrap="Wrap" HorizontalOptions="Start"/>
            </local:LegendExt.ItemsLayout>
      </local:LegendExt>
    </chart:SfCircularChart.Legend>
</chart:SfCircularChart>

C#

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

Output

Aligning Legend Items in Rows and Columns:
For a more structured layout at the bottom of the chart area, use UniformItemsLayout to arrange legend items in rows and columns.
XAML

<chart:SfCircularChart>
    <chart:SfCircularChart.Legend>
          <local:LegendExt1  Placement="Bottom">
               <local:LegendExt1.ItemsLayout>
                   <local:UniformLayouts MaxRows="12" MaxColumns="4" WidthRequest="600"  />
               </local:LegendExt1.ItemsLayout>
                ...
                ...
          </local:LegendExt1>
    </chart:SfCircularChart.Legend>
</chart:SfCircularChart>

C#

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

Output

For more details, please refer to the project on GitHub.

Conclusion

We hope you enjoyed learning about how to align the chart legend items in .NET MAUI Circular Chart.

This enhancement aims to make your data visualizations clearer and more readable.

You can refer to our .NET MAUI Chart’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our .NET MAUI Chart documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI from the License and Downloads page. If you are new to Syncfusion, try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components.

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