How to add a custom view to a hole in the Xamarin.Forms doughnut chart (SfChart)?

This example 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.

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="80" 
                       WidthRequest="90" 
                       HorizontalOptions="Center" 
                       VerticalOptions="Center"/>
            </StackLayout>
        </chart:DoughnutSeries.CenterView>
</chart:SfChart.Series>

C#

DoughnutSeries doughnutSeries = new DoughnutSeries()
{
    ItemsSource = SeriesDataCollection,
    XBindingPath = "XData",
    YBindingPath = "YData",
};

var centerview = new Image()
{
    Source = "Avatar2.png",
    HeightRequest = 80,
    WidthRequest = 90,
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
};

doughnutSeries.CenterView = centerview;
chart.Series.Add(doughnutSeries);

Output:

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

See also

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