Class SfCircularChart

Renders different types of circular charts, including doughnut, pie and radial bar charts. Each chart type presents data in a unique way, designed to enhance user-friendliness.

Inheritance

System.Object

ChartBase

SfCircularChart

Implements

Microsoft.Maui.IContentView

Microsoft.Maui.IView

Microsoft.Maui.IElement

Microsoft.Maui.ITransform

Microsoft.Maui.IPadding

Microsoft.Maui.ICrossPlatformLayout

Inherited Members

ChartBase.GetStreamAsync(ImageFileFormat)

ChartBase.InteractiveBehavior

ChartBase.InteractiveBehaviorProperty

ChartBase.Legend

ChartBase.LegendProperty

ChartBase.PlotAreaBackgroundView

ChartBase.PlotAreaBackgroundViewProperty

ChartBase.SaveAsImage(String)

ChartBase.SeriesBounds

ChartBase.Title

ChartBase.TitleProperty

ChartBase.TooltipBehavior

ChartBase.TooltipBehaviorProperty

Namespace: Syncfusion.Maui.Toolkit.Charts

Assembly: Syncfusion.Maui.Toolkit.dll

Syntax

public class SfCircularChart : ChartBase, IContentView, IView, IElement, ITransform, IPadding, ICrossPlatformLayout, IChart, ITouchListener, ITapGestureListener, IGestureListener, IParentThemeElement, IThemeElement

Remarks

Circular chart control is used to visualize the data graphically and to display the data with proportions and percentage of different categories.

SfCircularChart class properties provides an option to add the series collection, allows to customize the chart elements such as legend, data label, and tooltip features.

Series

ChartSeries is the visual representation of data. SfCircularChart offers PieSeries and DoughnutSeries.

To render a series, create an instance of required series class, and add it to the Series collection.

 
<chart:SfCircularChart>

       <chart:SfCircularChart.BindingContext>
           <local:ViewModel/>
       </chart:SfCircularChart.BindingContext>

       <chart:SfCircularChart.Series>
           <chart:PieSeries ItemsSource = "{Binding Data}" XBindingPath="XValue" YBindingPath="YValue"/>
       </chart:SfCircularChart.Series>
</chart:SfCircularChart>

SfCircularChart chart = new SfCircularChart();

ViewModel viewModel = new ViewModel();
chart.BindingContext = viewModel;

PieSeries series = new PieSeries()
{
    ItemsSource = viewModel.Data,
    XBindingPath = "XValue",
    YBindingPath = "YValue"
};
chart.Series.Add(series);

public ObservableCollection<Model> Data { get; set; }

public ViewModel()
{
   Data = new ObservableCollection<Model>();
   Data.Add(new Model() { XValue = "A", YValue = 100 });
   Data.Add(new Model() { XValue = "B", YValue = 150 });
   Data.Add(new Model() { XValue = "C", YValue = 110 });
   Data.Add(new Model() { XValue = "D", YValue = 230 });
}

Legend

The Legend contains list of data points in chart series. The information provided in each legend item helps to identify the corresponding data point in chart series. The Series XBindingPath property value will be displayed in the associated legend item.

To render a legend, create an instance of ChartLegend, and assign it to the Legend property.

MainPage.xaml
MainPage.xaml.cs

 
<chart:SfCircularChart>

       <chart:SfCircularChart.BindingContext>
           <local:ViewModel/>
       </chart:SfCircularChart.BindingContext>

       <chart:SfCircularChart.Legend>
           <chart:ChartLegend/>
       </chart:SfCircularChart.Legend>

       <chart:SfCircularChart.Series>
           <chart:PieSeries ItemsSource = "{Binding Data}" XBindingPath="XValue" YBindingPath="YValue"/>
       </chart:SfCircularChart.Series>
</chart:SfCircularChart>

SfCircularChart chart = new SfCircularChart();

ViewModel viewModel = new ViewModel();
chart.BindingContext = viewModel;

chart.Legend = new ChartLegend();

PieSeries series = new PieSeries()
{
    ItemsSource = viewModel.Data,
    XBindingPath = "XValue",
    YBindingPath = "YValue"
};
chart.Series.Add(series);

Tooltip

Tooltip displays information while tapping or mouse hover on the segment. To display the tooltip on the chart, you need to set the EnableTooltip property as true in ChartSeries.

To customize the appearance of the tooltip elements like Background, TextColor and Font, create an instance of ChartTooltipBehavior class, modify the values, and assign it to the chart’s TooltipBehavior property.

MainPage.xaml
MainPage.xaml.cs

<chart:SfCircularChart>

        <chart:SfCircularChart.BindingContext>
            <local:ViewModel/>
        </chart:SfCircularChart.BindingContext>

        <chart:SfCircularChart.TooltipBehavior>
            <chart:ChartTooltipBehavior/>
        </chart:SfCircularChart.TooltipBehavior>

        <chart:SfCircularChart.Series>
            <chart:PieSeries EnableTooltip = "True"
                             ItemsSource="{Binding Data}"
                             XBindingPath="XValue"
                             YBindingPath="YValue"/>
        </chart:SfCircularChart.Series>

</chart:SfCircularChart>

SfCircularChart chart = new SfCircularChart();

ViewModel viewModel = new ViewModel();
chart.BindingContext = viewModel;

chart.TooltipBehavior = new ChartTooltipBehavior();

PieSeries series = new PieSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue",
   EnableTooltip = true
};
chart.Series.Add(series);

Data Label

Data labels are used to display values related to a chart segment. To render the data labels, you need to enable the ShowDataLabels property as true in ChartSeries class.

To customize the chart data labels alignment, placement and label styles, need to create an instance of CircularDataLabelSettings and set to the DataLabelSettings property.

MainPage.xaml
MainPage.xaml.cs

<chart:SfCircularChart>

       <chart:SfCircularChart.BindingContext>
           <local:ViewModel/>
       </chart:SfCircularChart.BindingContext>

       <chart:SfCircularChart.Series>
           <chart:DoughnutSeries ShowDataLabels = "True"
                                 ItemsSource="{Binding Data}"
                                 XBindingPath="XValue"
                                 YBindingPath="YValue"/>
       </chart:SfCircularChart.Series>
</chart:SfCircularChart>

SfCircularChart chart = new SfCircularChart();

ViewModel viewModel = new ViewModel();
chart.BindingContext = viewModel;

DoughnutSeries series = new DoughnutSeries()
{
    ItemsSource = viewModel.Data,
    XBindingPath = "XValue",
    YBindingPath = "YValue",
    ShowDataLabels = true
};
chart.Series.Add(series);

Constructors

SfCircularChart()

Initializes a new instance of the SfCircularChart class.

Declaration

public SfCircularChart()

Fields

SeriesProperty

Identifies the Series bindable property.

Declaration

public static readonly BindableProperty SeriesProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the Series bindable property determines the collection of series in the circular chart.

Properties

Series

Gets or sets a collection of chart series to be added to the circular chart.

Declaration

public ChartSeriesCollection Series { get; set; }

Property Value

Type	Description
ChartSeriesCollection	This property takes ChartSeriesCollection instance as value.

Remarks

To render a series, create an instance of required series class, and add it to the Series collection.

Examples

    <chart:SfCircularChart>

          <chart:SfCircularChart.BindingContext>
              <local:ViewModel/>
          </chart:SfCircularChart.BindingContext>

          <chart:SfCircularChart.Series>
              <chart:DoughnutSeries
                  ItemsSource="{Binding Data}"
                  XBindingPath="XValue"
                  YBindingPath="YValue"/>
          </chart:SfCircularChart.Series>  

    </chart:SfCircularChart>

    SfCircularChart chart = new SfCircularChart();

    ViewModel viewModel = new ViewModel();
    chart.BindingContext = viewModel;

    DoughnutSeries series = new DoughnutSeries();
    series.ItemsSource = viewModel.Data;
    series.XBindingPath = "XValue";
    series.YBindingPath = "YValue";
    chart.Series.Add(series);

public ObservableCollection<Model> Data { get; set; }

public ViewModel()
{
   Data = new ObservableCollection<Model>();
   Data.Add(new Model() { XValue = "A", YValue = 100 });
   Data.Add(new Model() { XValue = "B", YValue = 150 });
   Data.Add(new Model() { XValue = "C", YValue = 110 });
   Data.Add(new Model() { XValue = "D", YValue = 230 });
}

Methods

AnimateSeries()

Animates the visible series collection dynamically.

Declaration

public void AnimateSeries()

Implements

Microsoft.Maui.IContentView

Microsoft.Maui.IView

Microsoft.Maui.IElement

Microsoft.Maui.ITransform

Microsoft.Maui.IPadding

Microsoft.Maui.ICrossPlatformLayout