Customize legend

[Mihai Alexandru Dumitru]

Hi,

Using .NET MAUI CircularChart, is there a way to customize the legend like in the attached screesnhot?
Is also a way to order the legend items based on some criteria? In the attached screenshot the legend items are in descending order based on the number value on the right column.

Attachment: Screenshot_20250224_111131_Expense_AI_8aab5ccb.zip

[Arul Jenith Berkmans]

Hi Mihai Alexandru Dumitru,

 

Query 1:  Customize the chart legend.

 

We understand you would like to customize the chart legend. You can achieve a similar appearance to your provided image by utilizing the ItemsLayout and ItemTemplate properties within the ChartLegend. Below is a code example demonstrating how to customize the legend:

 

Here is a simple code example to customize the legend:

 <chart:SfCircularChart.Legend>

     <chart:ChartLegend Placement="Bottom">

         <chart:ChartLegend.ItemsLayout>

             <VerticalStackLayout Spacing="10"></VerticalStackLayout>

         </chart:ChartLegend.ItemsLayout>

         <chart:ChartLegend.ItemTemplate>

             <DataTemplate>

                 <HorizontalStackLayout Spacing="5">

                     <Rectangle HeightRequest="12"

                    WidthRequest="12" Margin="3"

                    Background="{Binding IconBrush}"/>

                     <Label Text="{Binding Text}"

                            Margin="3"/>

                     <Label Text="{Binding Item.SalesRate}"

                            Margin="3"/>

                 </HorizontalStackLayout>                   

             </DataTemplate>

         </chart:ChartLegend.ItemTemplate>

     </chart:ChartLegend>

 </chart:SfCircularChart.Legend>

For more details, you can refer to the following documents:

 

Legend: Legend in .NET MAUI Chart control | Syncfusion

Items Layout: Legend in .NET MAUI Chart control | Syncfusion

Item Template: Legend in .NET MAUI Chart control | Syncfusion

 

Query 2: Order the legend item.

 

Currently, there isn't a direct method to order legend items based on their values. The legend items are organized based on the ItemSource of the chart series. To achieve a specific order, we recommend sorting the ItemSource collection before setting it to the series. This action will automatically reflect in the legend order.

 

Please note that altering the ItemSource collection will also impact the chart rendering order.

 

If these solutions do not fully meet your requirements, please feel free to provide additional information.  Thank you for your understanding.

 

Best regards,

Arul Jenith B.

[Mihai Alexandru Dumitru]

Thanks, this works, is there a way to change the Hight of the  VerticalStackLayout of the ChartLegend.ItemsLayout?

I have tried adding a 

         <chart:ChartLegend.ItemsLayout>

             <VerticalStackLayout Spacing="10"></VerticalStackLayout>

         </chart:ChartLegend.ItemsLayout>

[Arul Jenith Berkmans]

Hi Mihai Alexandru Dumitru,

 

To set the height of the legend, you can extend the ChartLegend and override the GetMaximumSizeCoefficient method. This method returns a value between 0 and 1, with 0 representing the minimum chart area and 1 representing the maximum. You can also set 0.5 value based on your required legend height.

 

For more details, please review the document: How to align the chart legend items in .NET MAUI Circular Chart?

 

If you need any further assistance, please feel free to contact us.

 

Best regards,

Arul Jenith B.

[Jonathan Nordell]

Is there a way to adjust the height of the legend items or spacing between them?  trying to use a vertical legend at the bottom and there is a lot of wasted space between each legend item.  I've tried setting margin and spacing and it doesn't seem to have any effect.

[Vallarasu Ravichandran]

Hi Jonathan Nordell,

 

Thank you for reaching out.

 

To better understand the behavior, you’re seeing with the vertical legend spacing, could you please share a screenshot or sample image that shows both the current layout and the expected appearance or image?

 

Additionally, it would be helpful to know the layout or container you have used. With these details, we’ll be able to determine whether the spacing is controlled by a configurable property or if it’s determined by the default layout behavior of the component.

 

We look forward to your response so we can assist you further.

 

Regards,

Vallarasu R