syncfusionexamples / how-to-add-a-custom-view-to-a-hole-of-doughtnut-chart Goto Github PK

View Code? Open in Web Editor NEW

This demo explains how to position the custom view as the center view of Xamarin.Forms doughnut series chart (SfChart)

C# 100.00%

how-to-add-a-custom-view-to-a-hole-of-doughtnut-chart's Introduction

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

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);