Large legend reduces the chart size

[Alexis]

Hi,

I am facing an issue where my chart size is decreasing when I have a legend wrapped and the label size of legend are very long

With a legend with small labels

As you can see when 2 legend item can't be on the same line, the legend is reducing the size of the chart.

How can I make the chart legend to fill the full horizontal size available?

My code:

 <chart:SfChart Margin="0,10,0,0" AreaBorderWidth="3"  HeightRequest="620" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand">

                                                <chart:SfChart.Title>

                                                    <chart:ChartTitle FontSize="17" FontAttributes="Bold" Text="{extensions:Translate My top }" />

                                                </chart:SfChart.Title>

                                                <chart:SfChart.Series>

                                                    <chart:DoughnutSeries 

                                                                         XBindingPath="Name"

    YBindingPath="ScorePercent" StartAngle="-90" CapStyle="BothCurve" EndAngle="270" MaximumValue="100" IsStackedDoughnut="true" x:Name="doughnutSeries" ItemsSource="{Binding SpecialitiesTop}" LegendIcon="Circle" EnableAnimation="True" >

                                                        <!--<chart:DoughnutSeries.ColorModel>

                                                            <chart:ChartColorModel Palette="Custom" x:Name="colorModel" />

                                                        </chart:DoughnutSeries.ColorModel>-->

                                                    

                                                    </chart:DoughnutSeries>

                                                </chart:SfChart.Series>

                                                <chart:SfChart.Legend>

                                                    <chart:ChartLegend  BackgroundColor="Green" x:Name="legend" OverflowMode="Wrap" DockPosition="Top">

                                                       

                                                        <chart:ChartLegend.ItemTemplate>

                                                            <DataTemplate>

                                                                <StackLayout Orientation="Horizontal" x:Name="root" >

                                                                    <StackLayout HeightRequest="70" WidthRequest="80">

                                                                        <chart:SfChart VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="Transparent">

                                                                            <chart:SfChart.Series>

                                                                                <chart:DoughnutSeries XBindingPath="Name"

    YBindingPath="ScorePercent" StartAngle="-90" CapStyle="BothCurve" EndAngle="270" MaximumValue="100" CircularCoefficient="1" IsStackedDoughnut="true" x:Name="series" ItemsSource="{Binding Converter={StaticResource indexToItemSourceConverter}}" Color="{Binding IconColor}" EnableAnimation="True">

                                                                                    <chart:DoughnutSeries.DoughnutCoefficient>

                                                                                        <OnPlatform x:TypeArguments="x:Double" WinPhone="0.6" Android="0.8" iOS="0.8" />

                                                                                    </chart:DoughnutSeries.DoughnutCoefficient>

                                                                                    <chart:DoughnutSeries.CenterView>

                                                                                        <Image Source="{Binding BindingContext.DataPoint.Image, Converter={StaticResource url}}" HeightRequest="{Binding InnerRadius, Converter={StaticResource imageSizeConverter}}" WidthRequest="{Binding InnerRadius, Converter={StaticResource imageSizeConverter}}" HorizontalOptions="Center" VerticalOptions="Center"/>

                                                                                    </chart:DoughnutSeries.CenterView>

                                                                                </chart:DoughnutSeries>

                                                                            </chart:SfChart.Series>

                                                                        </chart:SfChart>

                                                                    </StackLayout>

                                                                    <StackLayout Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="Center">

                                                                        <Label TextColor="{Binding IconColor}" FontSize="15" Text="{Binding DataPoint.ScorePercent, StringFormat='{0:N}%'}"/>

                                                                        <Label TextColor="{Binding IconColor}" FontSize="15" Text="{Binding DataPoint.Score, StringFormat='{0} points'}"/>

                                                                        <Label FontSize="13" VerticalTextAlignment="Center" TextColor="Black" Text="{Binding DataPoint.Name}" MaxLines="3" LineBreakMode="WordWrap" />

                                                                    </StackLayout>

                                                                </StackLayout>

                                                            </DataTemplate>

                                                        </chart:ChartLegend.ItemTemplate>

                                                    </chart:ChartLegend>

                                                </chart:SfChart.Legend>

                                            </chart:SfChart>

[Yuvaraj Palanisamy]

Hi Alexis, 

 

Greetings from Syncfusion. 

 

We would like to let you know that circular series (pie and donut chart) rendered based on the available space (excluding the size of title and legend).  As per it, while changing the size of legend, will be automatically affected on series rendering size. 

 

Circular series should be rendered with equal height and width. In case of varying its size, it will be drawn based on the minimum value of its available height and width.  Hence, we can see an empty horizontal space in your screenshot. 

 

We can increase the size of ChartArea by following two way.  

 

·       By Increasing the HeightRequest or changing the VerticalOption as FillAndExpand. 

 

·       Also, we can set OverflowMode to Scroll instead of setting Wrap.  

 

Also, we are trying to achieve feasible workaround to fit in desired height for circular series.  And we need some more time achieve this and we will update the complete details on or before 24^th March 2021. 

 

Regards, 

Yuvaraj. 

[Yuvaraj Palanisamy]

Hi Alexis, 

 

We have suggested the possible solution to increase the size of the chart area in the previous update. Could you confirm whether the provided solution was helpful to your requirement or not. Based on your confirmation we will analyze the feasible workaround to fit in the desired size of circular series. 

Regards, 

Yuvaraj 

[Alexis]

Hi,

Thanks for your help but it doesn't fit the needs.

I also tried the scrolling but it's not what we are expecting.

Maybe an easy solution which could fit for us should be to have one legend item per line. No wrap or scroll but one per line. Do you think it could be doable?

[Yuvaraj Palanisamy]

Hi Alexis, 

 

Greetings from Syncfusion. 

 

We achieved your requirement “Update the Chart size when chart inside of ScrollView” with the help of below code example. To increase the size the of the chart by overriding the OnAppearing() and Setting of SfChart HeightRequest. 

 

CodeSnippet:[XAML] 

<ScrollView> 

         <local:ChartView HeightRequest="700" WidthRequest="380" VerticalOptions="StartAndExpand" x:Name="chart"/>      

 </ScrollView> 

 

[C#]: 

protected override void OnAppearing() 

{ 

    base.OnAppearing(); 

    AllocateChartSize(); 

} 

 

 

private void AllocateChartSize() 

{ 

    var viewModel = (this.BindingContext as ViewModel); 

    if (viewModel != null) 

    { 

        var chartLegendItemHeight = 120; 

        var chartTitle = 100; 

        chart.HeightRequest = chart.WidthRequest + (viewModel.Data.Count * chartLegendItemHeight) + chartTitle; 

    } 

} 

 

 

Also, we have attached the sample for your reference. Please find the sample from the below link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/163702/ze/ChartSample_LegendHeight243656474  

  

Please let us know if you have any concern. 

 

Regards, 

Yuvaraj. 

[Alexis]

Sorry but it's not working in this case:

The issue is that you multiply the space for each legend. So you assume that there is one per line. It's not the case. 

  chart.HeightRequest = chart.WidthRequest + (viewModel.Data.Count * chartLegendItemHeight) + chartTitle; 

Then you have a big blank.

The easiest thing woould be to be able to add a overflow mode on the legend with column and we can define how many columns we want. 

And the chart takes the whole free space.

And the best would be to have the chart to take the whole place and the legend is independent.

Would you have some workarrounds?

[Saravanan Madheswaran]

Hi Alexis, 

 

Thanks for your feedback and detailed explanation of your problem faced. We would like to let you know that currently the circular chart and legend shares the whole height based on the element present in the item template. So, we have consider it as feature request and it will be tracked through below link.  

 

Feedback: https://www.syncfusion.com/feedback/24470  

 

We will prioritize the features every release based on the demands and we do not have an immediate plan to implement this since we committed with already planned work. So, this feature will be available for any of our upcoming releases.      

  

Please cast your vote to make it count and If you have any more specifications/suggestions to the feature request, you can add it as a comment in the portal.      

 

 

Also, we are checking for the possibility to provide sample level solution for this, we will update you the complete status by 21^st April 2021. 

 

Regards, 

Saravanan.  

[Saravanan Madheswaran]

Hi Alexis, 

 

Thanks for your patience, instead of multiply with the series data count, we have tried to find get average height of legend by comparing legend item width proportion to chart width.  

 

Please check the code snippet below.  

 

Considered or found individual legend item width. 

 

 

 

internal void AllocateChartSize() 

{ 

    var viewModel = (this.BindingContext as ViewModel); 

    if (viewModel != null) 

    { 

        var chartLegendItemHeight = 120; 

        var chartTitle = 30; 

 

        int rowCount = 1; 

        int item_width = 150; //Considered or specified individual legend item width. 

        int chartWidth = 300; //considered or specified chart width.  

 

        int rowWidth = 0; 

        for(int i=0; i<viewModel.Data.Count; i++) 

        { 

            rowWidth += item_width; 

 

            if(rowWidth > chartWidth) 

            { 

                rowWidth = item_width; 

                rowCount += 1; 

            } 

        } 

 

 

        chart.HeightRequest = chart.WidthRequest + (rowCount * chartLegendItemHeight) + chartTitle; 

    } 

} 

 

We hope the above approve will solve your problem as a workaround, and we consider this scenario while implementing “Improve the desired size implementation for Circular series” feature.  

 

Feedback: https://www.syncfusion.com/feedback/24470  

 

Regards, 

Saravanan.