How to add a custom view to a hole in the Xamarin.Forms doughnut charts

1 min read

This KB article explains how to add the desired view to a hole in the doughnut series of Xamarin.Forms chart by using the CenterView property that has been supported by the Syncfusion.Xamarin.SfChart version of 16.4.0.41.

https://help.syncfusion.com/xamarin/release-notes/v16.2.0.41?type=all#sfchart-features.

Please refer to the following code sample to add the Image view as the center of the doughnut series.

[XAML]

. . .
<chart:SfChart.Series>
    <chart:DoughnutSeries ItemsSource="{Binding SeriesDataCollection}" 
                          DoughnutCoefficient="0.6" 
                          CircularCoefficient="0.9"
                          XBindingPath="XData" 
                          YBindingPath="YData" >
 
                                <chart:DoughnutSeries.CenterView>
                                    <StackLayout >
                                        <Image Source="Avatar2.png" 
                                               HeightRequest="45"
                                              />
                                    </StackLayout>
                                </chart:DoughnutSeries.CenterView>
                                </chart:SfChart.Series>
. . .

View the sample in GitHub.

Output:

output of centerview of doughtnut series

Also see:
How to add a custom data marker in Xamarin.Forms Chart

How to visualize the Xamarin.Forms Pie Chart in linear form

How to apply custom fonts in Xamarin.Forms Chart

How to localize the labels in Xamarin.Forms Chart

Did you find this information helpful?

Yes

Comments

How to add a custom view to a hole in the Xamarin.Forms doughnut charts

Output:

Access denied