Class CircularDataLabelSettings

The CircularDataLabelSettings class is used to customize the appearance of circular series data labels.

Inheritance

System.Object

ChartDataLabelSettings

CircularDataLabelSettings

Inherited Members

ChartDataLabelSettings.LabelPlacement

ChartDataLabelSettings.LabelPlacementProperty

ChartDataLabelSettings.LabelStyle

ChartDataLabelSettings.LabelStyleProperty

ChartDataLabelSettings.UseSeriesPalette

ChartDataLabelSettings.UseSeriesPaletteProperty

Namespace: Syncfusion.Maui.Toolkit.Charts

Assembly: Syncfusion.Maui.Toolkit.dll

Syntax

public class CircularDataLabelSettings : ChartDataLabelSettings

Remarks

To customize data labels, create an instance of the CircularDataLabelSettings class, and set it to the DataLabelSettings property of the circular series.

ShowDataLabels

Data labels can be added to a chart series by enabling the ShowDataLabels option.

Xaml
C#

   <chart:SfCircularChart>

      <chart:PieSeries ItemsSource ="{Binding Data}"
                       XBindingPath="XValue"
                       YBindingPath="YValue"
                       ShowDataLabels="True"/>

   </chart:SfCircularChart>

    SfCircularChart chart = new SfCircularChart();
    ViewModel viewModel = new ViewModel();

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

    chart.Series.Add(series);

Customization

To change the appearance of data labels, it offers LabelStyle options.

Null values are invalid for LabelStyle.

Xaml
C#

   <chart:SfCircularChart>

      <chart:PieSeries ItemsSource ="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue"
                       ShowDataLabels="True">
         <chart:PieSeries.DataLabelSettings>
             <chart:CircularDataLabelSettings>
                   <chart:CircularDataLabelSettings.LabelStyle>
                       <chart:ChartDataLabelStyle Background = "Red" FontSize="14" TextColor="Black" />
                   </chart:CircularDataLabelSettings.LabelStyle>
               </chart:CircularDataLabelSettings>
         </chart:PieSeries.DataLabelSettings>
      </chart:PieSeries>
   </chart:SfCircularChart>

    SfCircularChart chart = new SfCircularChart();
    ViewModel viewModel = new ViewModel();

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

    var labelStyle = new ChartDataLabelStyle()
    {
        Background = new SolidColorBrush(Colors.Red),
        TextColor = Colors.Black,
        FontSize = 14,
    };
    series.DataLabelSettings = new CircularDataLabelSettings()
    {
        LabelStyle = labelStyle,
    };

    chart.Series.Add(series);

Constructors

CircularDataLabelSettings()

Initializes a new instance of the CircularDataLabelSettings.

Declaration

public CircularDataLabelSettings()

Fields

ConnectorLineSettingsProperty

Identifies the ConnectorLineSettings bindable property.

Declaration

public static readonly BindableProperty ConnectorLineSettingsProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the ConnectorLineSettings bindable property determines the customization options available for the connector lines.

LabelPositionProperty

Identifies the LabelPosition bindable property.

Declaration

public static readonly BindableProperty LabelPositionProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the LabelPosition bindable property determines the position of the data labels either inside or outside the chart segment.

SmartLabelAlignmentProperty

Identifies the SmartLabelAlignment bindable property.

Declaration

public static readonly BindableProperty SmartLabelAlignmentProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the SmartLabelAlignment bindable property used to arrange the data labels smartly when they overlap.

Properties

ConnectorLineSettings

Gets or sets a value to customize the appearance of the connector lines in the circular series.

Declaration

public ConnectorLineStyle ConnectorLineSettings { get; set; }

Property Value

Type	Description
ConnectorLineStyle	It accepts ConnectorLineStyle value.

Remarks

Null values are invalid.

   <chart:SfCircularChart>
      <chart:PieSeries ItemsSource ="{Binding Data}" 
                       XBindingPath="XValue" 
                       YBindingPath="YValue"
                       ShowDataLabels="True">
      <chart:PieSeries.DataLabelSettings>
           <chart:CircularDataLabelSettings LabelPosition="Outside" >
               <chart:CircularDataLabelSettings.ConnectorLineSettings>
                  <chart:ConnectorLineStyle Stroke="Red" StrokeWidth="2" />
               </chart:CircularDataLabelSettings.ConnectorLineSettings>
           </chart:CircularDataLabelSettings>
       </chart:PieSeries.DataLabelSettings>
      </chart:PieSeries>
   </chart:SfCircularChart>

    SfCircularChart chart = new SfCircularChart();
    ViewModel viewModel = new ViewModel();

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

    var connectorLineStyle = new ConnectorLineStyle
    {
      Stroke = new SolidColorBrush(Colors.Red),
      StrokeWidth = 2
    };
    series.DataLabelSettings = new CircularDataLabelSettings()
    {
      LabelPosition = ChartDataLabelPosition.Outside
      ConnectorLineSettings = connectorLineStyle
    };

    chart.Series.Add(series);

LabelPosition

Gets or sets the options to position the data labels either inside or outside the chart segment.

Declaration

public ChartDataLabelPosition LabelPosition { get; set; }

Property Value

Type	Description
ChartDataLabelPosition	It accepts ChartDataLabelPosition values and its default value is Inside.

Examples

Xaml
C#

    <chart:SfCircularChart>
           <chart:PieSeries ItemsSource="{Binding Data}"                                                          
                            XBindingPath="Product"
                            YBindingPath="SalesRate"
                            ShowDataLabels="True">
               <chart:PieSeries.DataLabelSettings>
                   <chart:CircularDataLabelSettings LabelPosition="Outside"/>
               </chart:PieSeries.DataLabelSettings>
           </chart:PieSeries>
     </chart:SfCircularChart>

    SfCircularChart chart = new SfCircularChart();
    PieSeries series = new PieSeries();
    series.ItemsSource = new ViewModel().Data;
    series.XBindingPath = "Product";
    series.YBindingPath = "SalesRate";
    series.ShowDataLabels = true;
    series.DataLabelSettings = new CircularDataLabelSettings()
    {
       LabelPosition= ChartDataLabelPosition.Outside,
    };
    chart.Series.Add(series);

SmartLabelAlignment

Gets or sets a value to arrange the data labels smartly when they overlap.

Declaration

public SmartLabelAlignment SmartLabelAlignment { get; set; }

Property Value

Type	Description
SmartLabelAlignment	It accepts SmartLabelAlignment values and its default value is Shift.

Examples

Xaml
C#

    <chart:SfCircularChart>
           <chart:PieSeries ItemsSource="{Binding Data}"                                                      
                            XBindingPath="Product"
                            YBindingPath="SalesRate"
                            ShowDataLabels="True">
               <chart:PieSeries.DataLabelSettings>
                   <chart:CircularDataLabelSettings LabelPosition="Outside" SmartLabelAlignment="Hide"/>
               </chart:PieSeries.DataLabelSettings>
           </chart:PieSeries>
     </chart:SfCircularChart>

    SfCircularChart chart = new SfCircularChart();
    PieSeries series = new PieSeries();
    series.ItemsSource = new ViewModel().Data;
    series.XBindingPath = "Product";
    series.YBindingPath = "SalesRate";
    series.ShowDataLabels = true;
    series.DataLabelSettings = new CircularDataLabelSettings()
    {
       LabelPosition= ChartDataLabelPosition.Outside,
       SmartLabelAlignment = SmartLabelAlignment.Hide,
    };
    chart.Series.Add(series);