How To Add A Custom View To A Hole In The Xamarin.Forms Doughnut Charts
center-view
centerview
chart
custom-view
doughnut-chart
xamarin
xamarin-forms
This article explains how to add the desired view to a hole in the doughnut series of Xamarin.Forms chart by using the CenterView property which has been supported from 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 the below code snippet in both XAML and C# to add the Image view as center of 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>
. . .
[C#]
DoughnutSeries doughnutSeries = new DoughnutSeries()
{
ItemsSource = SeriesDataCollection,
XBindingPath = "XData",
YBindingPath = "YData",
DoughnutCoefficient="0.6"
CircularCoefficient="0.9"
};
var centerView = new StackLayout()
{
Children =
{
new Image()
{
Source = "Avatar2.png",
HeightRequest = 45,
}
}
};
doughnutSeries.CenterView = centerView;
chart.Series.Add(doughnutSeries);
Output
See also
How to add a custom data marker in Xamarin.Forms Chart
How to visualize the Xamarin.Forms Pie Chart in linear form
