Chart Legend Cropped

[Ben Holtsclaw]

I'm having difficulty working around legend cropping issues on the circular chart. I keep trying different permutations of size settings but can't come up with anything to make it work reliably. Even if I adjust the PieSeries radius down to 0.5, I still get cropping.

It seems like the cropping is the same regardless of the PieSeries size. Here the chart is displayed without a custom radius.

How can I make the legend take the space it needs and then allow the PieSeries to use the remaining space?

Thanks so much for your great support!

                <Border Style="{DynamicResource DashboardCardStyle}" HorizontalOptions="FillAndExpand">

                    <chart:SfCircularChart MaximumHeightRequest="250">
                        <chart:PieSeries ItemsSource="{Binding PieChartDataPoints}"
                                         XBindingPath="Level"
                                         YBindingPath="Percentage"
                                         ShowDataLabels="True"
                                         PaletteBrushes="{Binding SfPieChartBrushes}"
                                         EnableAnimation="True"
                                         Stroke="White"
                                         StrokeWidth="2"
                                         >
                            <chart:PieSeries.DataLabelSettings>
                                <chart:CircularDataLabelSettings>
                                    <chart:CircularDataLabelSettings.LabelStyle>
                                        <chart:ChartDataLabelStyle LabelFormat="#.##'%"/>
                                    </chart:CircularDataLabelSettings.LabelStyle>
                                </chart:CircularDataLabelSettings>
                            </chart:PieSeries.DataLabelSettings>
                        </chart:PieSeries>
                        <chart:SfCircularChart.Legend>
                            <chart:ChartLegend Placement="Right">
                                <chart:ChartLegend.ItemTemplate>
                                    <DataTemplate>
                                        <StackLayout Orientation="Horizontal" BackgroundColor="LightGoldenrodYellow" Margin="0,0,10,0">
                                            <Ellipse WidthRequest="14" HeightRequest="14" Margin="3" Fill="{Binding IconBrush}"/>
                                            <Label Text="{Binding Text}" />
                                        </StackLayout>
                                    </DataTemplate>
                                </chart:ChartLegend.ItemTemplate>
                            </chart:ChartLegend>
                        </chart:SfCircularChart.Legend>
                    </chart:SfCircularChart>
                </Border>

[Saiyath Ali Fathima Bee Moidhin Abdhul Kathar]

Hi Ben,

 

We would like to inform you that the mentioned issue, "Legend Crop," was reproduced with.NET 8.0. Our development team is actively working on your query and will update our response within two business days on December 19, 2023.

 

Regards,

Saiyath Ali Fathima M

[Nanthini Mahalingam]

Hi Ben,

We would like to let you know that we suggest using the LineBreakMode as WordWrap in the legend template. By using this, we are able to view the entire legend template in the view. For reference, we have provided the code snippet and demo.

<chart:ChartLegend.ItemTemplate>

   <DataTemplate>

       <StackLayout Orientation="Horizontal" BackgroundColor="LightGoldenrodYellow" Margin="0,0,10,0">

           <Ellipse WidthRequest="12" HeightRequest="12" Margin="3" Fill="{Binding IconBrush}"/>

           <Label Text="{Binding Text}" LineBreakMode="WordWrap" WidthRequest="40" />

       </StackLayout>

   </DataTemplate>

</chart:ChartLegend.ItemTemplate>

Output:

We hope it will help you achieve your requirement.

Regards,

Nanthini M

[Ben Holtsclaw]

Thank you for the suggestion, but I'm afraid that doesn't look visually appealing at all. Is further work being done on this, or is this the final solution?

[Nanthini Mahalingam]

We need to inform you that we currently do not have direct support for "Custom Layout Support for Chart Legend in .NET MAUI" which is used to align the legend items in the desired view. We have already created a feature request

For this support.You can find the feedback portal at the following link: https://www.syncfusion.com/feedback/43478/custom-layout-support-for-chart-legend-in-net-maui

We will prioritize the features for each release based on demand and priority. Therefore, this feature will be available in one of our upcoming releases. You can also track the status of the feature using the feedback provided.

If you have any additional specifications or suggestions for the bug report, please add them as a comment in the feedback portal.