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>

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

SyncfusionExamples/Add-custom-view-in-the-center-view-of-Xamarin.Forms-DoughnutSeries

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

Output:

See also