Articles in this section
Category / Section

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

3 mins read

The Syncfusion® .NET MAUI Circular Chart provides 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
Use the FlexLayout to wrap legend items, which is useful when handling numerous legend items that would otherwise require scrolling.

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

WrapOutput.png

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

UniformsGrid.png

Download the complete sample from GitHub.

Conclusion

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

You can refer to our .NET MAUI Circular Chart feature tour page to learn about its other groundbreaking feature representations. 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 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!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied