DoughnutSeries Chart Customization Assistance Needed

[Yaseen Wakeel]

Hello Syncfusion Teams,

I hope this message finds you well. I am reaching out to you regarding the customization of the DoughnutSeries chart in Xamarin forms. I have attached a screenshot of the desired design and the current code of my project.

Required Design:

Current Design:

Source Code:

    <Grid BackgroundColor="White">

            <Grid.RowDefinitions>

                <RowDefinition Height="Auto" />

                <RowDefinition Height="Auto" />

            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="Auto"></ColumnDefinition>

                <ColumnDefinition Width="Auto"></ColumnDefinition>

            </Grid.ColumnDefinitions>

            <sfChart:SfChart HorizontalOptions="Start" HeightRequest="190" Grid.Row="0" Grid.Column="0" WidthRequest="200">

                <sfChart:DoughnutSeries ItemsSource="{Binding ChartData}" XBindingPath="Category" YBindingPath="Value" DoughnutCoefficient="0.6">

                    <sfChart:DoughnutSeries.DataMarker>

                        <sfChart:ChartDataMarker ShowLabel="True" LabelContent="{Binding Value, StringFormat='{0:F2%}'}">

                            <sfChart:ChartDataMarker.LabelStyle>

                                <sfChart:DataMarkerLabelStyle TextColor="White" />

                            </sfChart:ChartDataMarker.LabelStyle>

                        </sfChart:ChartDataMarker>

                    </sfChart:DoughnutSeries.DataMarker>

                    <sfChart:DoughnutSeries.CenterView>

                        <ContentView>

                            <Label VerticalTextAlignment="Center" HorizontalTextAlignment="Center" FontSize="18" TextColor="Black"

                                 HorizontalOptions="Center" VerticalOptions="CenterAndExpand" >

                                <Label.FormattedText>

                                    <FormattedString>

                                        <Span Text="Total Roi" FontSize="12" />

                                        <Span Text=" " />

                                        <Span Text="$0.00006" FontSize="14" FontAttributes="Bold" />

                                    </FormattedString>

                                </Label.FormattedText>

                            </Label>

                        </ContentView>

                    </sfChart:DoughnutSeries.CenterView>

                    <sfChart:DoughnutSeries.ColorModel>

                        <sfChart:ChartColorModel Palette="Custom">

                            <sfChart:ChartColorModel.CustomBrushes>

                                <Color>#3498DB</Color>

                                <!-- Forex: Blue -->

                                <Color>#27AE60</Color>

                                <!-- Crypto: Green -->

                                <Color>#9B59B6</Color>

                                <!-- Stocks: Purple -->

                                <Color>#F1C40F</Color>

                                <!-- Indices: Yellow -->

                                <Color>#E74C3C</Color>

                                <!-- Commodities: Red -->

                            </sfChart:ChartColorModel.CustomBrushes>

                        </sfChart:ChartColorModel>

                    </sfChart:DoughnutSeries.ColorModel>

                </sfChart:DoughnutSeries>

            </sfChart:SfChart>

            <StackLayout Grid.Row="0" Grid.Column="1" Orientation="Vertical" HorizontalOptions="Start">

                <Label Text="Legend" FontSize="18" HorizontalOptions="CenterAndExpand" />

                <!--Legend Items-->

                <StackLayout Orientation="Horizontal" HorizontalOptions="Start" VerticalOptions="Start">

                    <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="Center" HorizontalOptions="Center">

                        <BoxView WidthRequest="10" HeightRequest="10" BackgroundColor="#3498DB" CornerRadius="5" />

                    </Grid>

                    <Label TextColor="Black" Margin="0,-3,0,0" Text="Forex" VerticalOptions="Center" HorizontalOptions="Center" />

                </StackLayout>

                <StackLayout Orientation="Horizontal" HorizontalOptions="Start">

                    <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="Center" HorizontalOptions="Center">

                        <BoxView WidthRequest="10" HeightRequest="10" BackgroundColor="#27AE60" CornerRadius="5" />

                    </Grid>

                    <Label TextColor="Black" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Margin="0,-3,0,0" Text="Crypto" VerticalOptions="Start" HorizontalOptions="Center" />

                </StackLayout>

                <StackLayout Orientation="Horizontal" HorizontalOptions="Start">

                    <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="Center" HorizontalOptions="Center">

                        <BoxView WidthRequest="10" HeightRequest="10" BackgroundColor="#9B59B6" CornerRadius="5" />

                    </Grid>

                    <Label TextColor="Black" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Margin="0,-3,0,0" Text="Stocks" VerticalOptions="Start" HorizontalOptions="Center" />

                </StackLayout>

                <StackLayout Orientation="Horizontal" HorizontalOptions="Start">

                    <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="Center" HorizontalOptions="Center">

                        <BoxView WidthRequest="10" HeightRequest="10" BackgroundColor="#F1C40F" CornerRadius="5" />

                    </Grid>

                    <Label TextColor="Black" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Margin="0,-3,0,0" Text="Indices" VerticalOptions="Start" HorizontalOptions="Center" />

                </StackLayout>

                <StackLayout Orientation="Horizontal" HorizontalOptions="Start">

                    <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="Center" HorizontalOptions="Center">

                        <BoxView WidthRequest="10" HeightRequest="10" BackgroundColor="#E74C3C" CornerRadius="5" />

                    </Grid>

                    <Label TextColor="Black" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Margin="0,-3,0,0" Text="Commodities" VerticalOptions="Start" HorizontalOptions="Center" />

                </StackLayout>

            </StackLayout>

        </Grid>

I would greatly appreciate your assistance in customizing this chart according to my requirements. Please let me know if you need any further information or clarification.

Thank you for your time and support.

Best regards,

Yaseen Wakeel

[Sowndharya Selladurai]

Hi Yaseen,

Thanks for providing the screenshots. Below, we've shared how to customize the doughnut chart:

DataLabel Customization:

To extend the data label outside, we suggest using DataMarkerPosition as 'OutsideExtended.' Below, we've attached the code snippet for reference.

<chart:DoughnutSeries   DataMarkerPosition="OutsideExtended" />

Also, we recommend using the 'EnableSmartLabels' API to arrange the data marker labels smartly and avoid overlapping when labels intersect.

Data Marker Position Reference Document: https://help.syncfusion.com/xamarin/charts/charttypes#doughnut-chart

Smart Label Reference Document: https://help.syncfusion.com/xamarin/charts/datamarker#smart-labels

Legend Customization:

You can wrap the legend using the 'OverflowMode' API.

Reference Document: https://help.syncfusion.com/xamarin/charts/legend#legend-wrap

You can also position the legend to the right side of the chart using the 'DockPosition' API.

Reference Document: https://help.syncfusion.com/xamarin/charts/legend#positioning-the-legend

Notes: 

Wrap support aligns the legend items to the left based on the provided MaxWidth; there is no built-in support for center-aligning items inside the wrap panel.

Regards,

Sowndharya.