Chart - Legends center aligned

[Maria Magana]

Hi,

How can I center aligned the legends?

When it is just one item, the legend is aligned to the center but when there is more than one line the legends are aligned to the left.

Thank you!

Current result

Expected result

 

[Devakumar Dhanapoosanam]

Hi Maria Magana,

 

Greetings from Syncfusion.

We have analyzed your query and we would like to let you know that currently we don’t have direct support to align the wrapped legend items at next line in center position.

We are currently validating the feasibility of achieving this requirement at our end and we will update you the complete details on or before October 12, 2021.  

 

Regards,
Devakumar D 

[Devakumar Dhanapoosanam]

Hi Maria Magana, 

 

Thanks for your patience. 

 

We have achieved your requirement by adding the Flexlayout with BoxView and Label as legend items. Please refer the below code example for more details.  

 

XAML: 

<StackLayout Spacing="0"> 

    <chart:SfChart x:Name="chart"  

            HorizontalOptions="FillAndExpand" 

            VerticalOptions="FillAndExpand" 

            SeriesRendered="chart_SeriesRendered"> 

 

        <chart:SfChart.Series> 

            <chart:PieSeries x:Name="series" 

                ItemsSource="{Binding Data}" 

                XBindingPath="XValue" 

                YBindingPath="YValue" 

                EnableTooltip="True"> 

                <chart:PieSeries.ColorModel> 

                    <chart:ChartColorModel Palette="Natural"/> 

                </chart:PieSeries.ColorModel> 

            </chart:PieSeries> 

        </chart:SfChart.Series> 

    </chart:SfChart> 

 

    <FlexLayout BindableLayout.ItemsSource="{Binding Data}" 

                HorizontalOptions="Center"  

                                                       VerticalOptions="Center" 

                Direction="Row"  

                                                       Wrap="Wrap" 

                BackgroundColor="White" Padding="0" Margin="0" 

                                                       JustifyContent="Center" 

                                                       AlignContent="Start"  

                                                       AlignItems="Start"> 

        <BindableLayout.ItemTemplate> 

            <DataTemplate> 

                <StackLayout Orientation="Horizontal" Spacing="5"  

                             BackgroundColor="Transparent" VerticalOptions="Center"> 

                    <BoxView Color="{Binding Color}"
                                       WidthRequest="10" HeightRequest="10"  

                                       CornerRadius="2" 

                                       HorizontalOptions="Center" VerticalOptions="Center"/> 

                    <Label Text="{Binding XValue}" HorizontalOptions="Start" VerticalOptions="Center" 

                           HorizontalTextAlignment="Start" VerticalTextAlignment="Center"  

                           Margin="0,0,5,0"/> 

                </StackLayout> 

            </DataTemplate> 

        </BindableLayout.ItemTemplate> 

    </FlexLayout> 

</StackLayout> 

 

C#: 

…
private void chart_SeriesRendered(object sender, EventArgs e) 

{ 

    var colors = chart.ColorModel.GetColors(series.ColorModel.Palette); 

    if (colors != null && colors.Count > 0) 

    { 

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

        { 

            viewModel.Data[i].Color = colors[i % colors.Count()]; 

        } 

    } 

} 

… 

 

Sample: https://www.syncfusion.com/downloads/support/forum/169504/ze/1695041451353291.zip  

 

Output: 

Please let us know if you need any further assistance on this. 

 

Regards, 

Devakumar D 

[Maria Magana]

Thank you! 

[Devakumar Dhanapoosanam]

Hi Maria Magana, 

 

Thanks for the update. Please get back to us if you need any other assistance. 

 

Regards, 

Devakumar D