Class AccumulationDataLabelSettings

Datalabels shows the information about the data points in the accumulation chart.

Inheritance

System.Object

SfBaseComponent

AccumulationDataLabelSettings

Inherited Members

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

SfBaseComponent.OnAfterRenderAsync(Boolean)

SfBaseComponent.OnInitializedAsync()

SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

Namespace: Syncfusion.Blazor.Charts

Assembly: Syncfusion.Blazor.dll

Syntax

public class AccumulationDataLabelSettings : SfBaseComponent

Constructors

AccumulationDataLabelSettings()

Declaration

public AccumulationDataLabelSettings()

Properties

Angle

Gets or sets the angle for rotating the data labels in the SfAccumulationChart.

Declaration

public double Angle { get; set; }

Property Value

Type	Description
System.Double	Accepts a double value ranging from -360 to 360, representing the angle in degrees. The default value is 0.

Remarks

When this property is set to a negative value, the data label will rotate in an anti-clockwise direction. This property is effective only when EnableRotation is enabled.

Examples

// The following example demonstrates setting the rotation angle of data labels to 90 degrees:
<SfAccumulationChart>
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
            <AccumulationDataLabelSettings Visible="true" EnableRotation="true" Angle="90"></AccumulationDataLabelSettings>
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
</SfAccumulationChart>

Border

Gets or sets the options to customize the border of the data labels for the SfAccumulationChart series.

Declaration

public AccumulationChartDataLabelBorder Border { get; set; }

Property Value

Type	Description
AccumulationChartDataLabelBorder	Accepts the instance of the AccumulationChartDataLabelBorder class. The default value is a new instance of the AccumulationChartDataLabelBorder class.

Remarks

Use this property to customize the border of data labels in the SfAccumulationChart series.

Examples

// The following example demonstrates how to customise the border for the datalabel:
<SfAccumulationChart>
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
            <AccumulationDataLabelSettings Visible="true">
                 <AccumulationChartDataLabelBorder Color="red" Width="2"></AccumulationChartDataLabelBorder>
            </AccumulationDataLabelSettings>
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
</SfAccumulationChart>

ConnectorStyle

Gets or sets the options to customize the connector line in the SfAccumulationChart series.

Declaration

public AccumulationChartConnector ConnectorStyle { get; set; }

Property Value

Type	Description
AccumulationChartConnector	Accepts an instance of the AccumulationChartConnector class. The default value is a new instance of the AccumulationChartConnector class with default settings.

Remarks

This property is applicable for Pie, Funnel, and Pyramid series. The default connector length for the Pie series is 4%. For other series, it is null. This is primarily used when the Position is set to AccumulationLabelPosition.Outside.

Examples

// The following example demonstrates setting a connector line in an accumulation chart:
<SfAccumulationChart>
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
            <AccumulationDataLabelSettings Visible="true" Position="AccumulationLabelPosition.Outside">
                <AccumulationChartConnector Color="#1b49cc" DashArray="2,2" Length="30" Type="ConnectorType.Curve" Width="5"></AccumulationChartConnector>
            </AccumulationDataLabelSettings>
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
</SfAccumulationChart>

EnableRotation

Gets or sets the data label rotation option for the SfAccumulationChart series.

Declaration

public bool EnableRotation { get; set; }

Property Value

Type	Description
System.Boolean	Accepts a boolean value to enable or disable rotation of the data labels. The default value is false.

Remarks

When EnableRotation is set to true, the data label will be rotated based on the Angle property.

Examples

// The following example demonstrates how to enable rotation for the data label:
<SfAccumulationChart>
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
            <AccumulationDataLabelSettings Visible="true" EnableRotation="true" Angle="90"></AccumulationDataLabelSettings>
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
</SfAccumulationChart>

Fill

Gets or sets the background fill color of the data labels.

Declaration

public string Fill { get; set; }

Property Value

Type	Description
System.String	Accepts valid CSS color string values such as hexadecimal, rgba, and color names. The default value is transparent.

Remarks

This property is applicable only when AccumulationChartDataLabelBorder is enabled.

Examples

// The following example demonstrates setting a fill color for the data label background:
<SfAccumulationChart>
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
            <AccumulationDataLabelSettings Visible="true" Fill="#e24e79">
                <AccumulationChartDataLabelBorder Width="1" Color="#1e15df"></AccumulationChartDataLabelBorder>
            </AccumulationDataLabelSettings>
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
</SfAccumulationChart>

Font

Gets or sets the options to customize the font of the data labels for the SfAccumulationChart series.

Declaration

public AccumulationChartDataLabelFont Font { get; set; }

Property Value

Type	Description
AccumulationChartDataLabelFont	Accepts the instance of the AccumulationChartDataLabelFont class. The default value is a new instance of the AccumulationChartDataLabelFont class.

Remarks

Based on the SfAccumulationChart theme, the font style will be applied to the data labels.

Examples

// The following example demonstrates how to customise the font style of the data label text:
<SfAccumulationChart>
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
            <AccumulationDataLabelSettings Visible="true">
                <AccumulationChartDataLabelFont Size="20px" FontFamily="Arial" FontWeight="600" FontStyle="bold" Color="blue" Opacity=0.5></AccumulationChartDataLabelFont>
            </AccumulationDataLabelSettings>
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
</SfAccumulationChart>

Format

Gets and sets the data label format that accepts any global string format like ‘C’, ‘P’, ‘N1’, etc. It also accepts placeholder like ‘{value}°C’ in which value represent the data label, for example, 20°C.

Declaration

public string Format { get; set; }

Property Value

Type	Description
System.String	Specifies the format for the data label. The default value is null.

Remarks

Use the Format property to define the format for the data labels in the SfAccumulationChart series. You can use standard string format specifiers like 'C' for currency, 'P' for percentage, 'N1' for numeric format with one decimal place, etc. Additionally, you can use placeholders like '{value}' in the format string to dynamically represent the data label value.

Examples

// The following example demonstrates how to format the data label using currency format:
<SfAccumulationChart>
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
            <AccumulationDataLabelSettings Visible="true" Format="C"></AccumulationDataLabelSettings>
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
</SfAccumulationChart>

MaxWidth

Gets or sets the maximum width of the individual data label item in the SfAccumulationChart series.

Declaration

public double MaxWidth { get; set; }

Property Value

Type	Description
System.Double	Specifies the maximum width for each data label. The default value is double.NaN.

Remarks

Use the MaxWidth property to control the maximum allowable width of each data label, ensuring that labels fit within the available space without overlapping or extending undesirably.

Examples

// The following example demonstrates setting the maximum width for data labels to 100 pixels:
<SfAccumulationChart>
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
            <AccumulationDataLabelSettings Visible="true" MaxWidth="100">
            </AccumulationDataLabelSettings>
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
</SfAccumulationChart>

Name

Gets or sets the datalabel mapping field name for the SfAccumulationChart series.

Declaration

public string Name { get; set; }

Property Value

Type	Description
System.String	Accepts the string value of the field name in the data source. The default value is null.

Remarks

Use the Name property to specify the field name in the data source that should be used for data label mapping in the accumulation chart series. When this property is set, the chart will use the specified field values as data labels for the corresponding data points.

Examples

// The following code demonstrates how to use the Name property to set a data label field name:
<SfAccumulationChart>
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
            <AccumulationDataLabelSettings Visible ="true" Name="Text"></AccumulationDataLabelSettings>
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
</SfAccumulationChart>
@code{
    public class Statistics
    {
        public string Browser { get; set; }
        public double Users { get; set; }
        public string Text { get; set; }
    }
    public List<Statistics> StatisticsDetails = new List<Statistics>
    {
        new Statistics { Browser = "Chrome", Users = 37, Text= "37%" },
        new Statistics { Browser = "UC Browser", Users = 17, Text= "17%" },
        new Statistics { Browser = "iPhone", Users = 19, Text= "19%" },
        new Statistics { Browser = "Others", Users = 4 , Text= "4%" }
    };
}

Position

Gets or sets the position of the data labels for the SfAccumulationChart series.

Declaration

public AccumulationLabelPosition Position { get; set; }

Property Value

Type	Description
AccumulationLabelPosition	Accepts a value from the AccumulationLabelPosition enumeration that specifies the position of the data labels. Options include: Outside: Places the label outside the data point. Inside: Places the label inside the data point. The default value is AccumulationLabelPosition.Outside.

Remarks

The Position property determines the location of data labels in relation to the data points within the accumulation chart.

Examples

// The following code demonstrates setting the position of the data labels to Inside:
<SfAccumulationChart>
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
            <AccumulationDataLabelSettings Visible="true" Position="AccumulationLabelPosition.Inside">
            </AccumulationDataLabelSettings>
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
</SfAccumulationChart>

Rx

Gets or sets the horizontal radius for the rounded corners of the data label.

Declaration

public double Rx { get; set; }

Property Value

Type	Description
System.Double	Represents the horizontal radius in pixels for the corners. The default value is 5.

Remarks

This property is applicable only when AccumulationChartDataLabelBorder is enabled.

Examples

// The following example demonstrates setting a horizontal radius for the data label corners:
<SfAccumulationChart>
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
            <AccumulationDataLabelSettings Visible="true" Rx="10">
                <AccumulationChartDataLabelBorder Width="1" Color="#1e15df"></AccumulationChartDataLabelBorder>
            </AccumulationDataLabelSettings>
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
</SfAccumulationChart>

Ry

Gets or sets the vertical radius for the rounded corners of the data label.

Declaration

public double Ry { get; set; }

Property Value

Type	Description
System.Double	Represents the vertical radius in pixels for the corners. The default value is 5.

Remarks

This property is applicable only when AccumulationChartDataLabelBorder is enabled.

Examples

// The following example demonstrates setting a vertical radius for the data label corners:
<SfAccumulationChart>
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
            <AccumulationDataLabelSettings Visible="true" Ry="8">
                <AccumulationChartDataLabelBorder Width="1" Color="#1e15df"></AccumulationChartDataLabelBorder>
            </AccumulationDataLabelSettings>
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
</SfAccumulationChart>

ShowZero

Gets or sets a value indicating whether data labels should be visible for zero points.

Declaration

public bool ShowZero { get; set; }

Property Value

Type	Description
System.Boolean	A boolean value where true will display data labels for zero points and false will hide them. The default value is true.

Remarks

The ShowZero property determines the visibility of data labels specifically for data points with a value of zero.

Examples

// The following example demonstrates how to set the `ShowZero` property to hide data labels for zero points:
<SfAccumulationChart>
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
            <AccumulationDataLabelSettings Visible="true" ShowZero="false"></AccumulationDataLabelSettings>
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
</SfAccumulationChart>

Template

Gets or sets a custom template to format the data label content within the SfAccumulationChart.

Declaration

public RenderFragment<AccumulationChartDataPointInfo> Template { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment<AccumulationChartDataPointInfo>	The template content used for rendering the data labels.

Remarks

The Template property allows defining a custom template for data labels. Use the template’s context parameter to access an instance of AccumulationChartDataPointInfo and its fields.

Examples

// The following example demonstrates how to create a custom template for data labels:
<SfAccumulationChart>
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
            <AccumulationDataLabelSettings Visible="true" Position="AccumulationLabelPosition.Outside">
                <Template>
                @{
                    var data = context as AccumulationChartDataPointInfo;
                    <table>
                        <tr><td align="center">@data.Y</td></tr>
                    </table>
                }
                </Template>
            </AccumulationDataLabelSettings>
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
</SfAccumulationChart>

TextOverflow

Gets or sets the text overflow behavior for data labels in the SfAccumulationChart series. This property determines how overflowing text is handled when it exceeds the point segment, slice, or specified MaxWidth.

Declaration

public LabelOverflow TextOverflow { get; set; }

Property Value

Type	Description
LabelOverflow	Accepts a value from the LabelOverflow enumeration that specifies the overflow handling behavior. Options include: Ellipse: Adds an ellipsis ("...") to the clipped text. Clip: Clips the text without any visual indication of clipping. The default value is LabelOverflow.Ellipse.

Remarks

Use the TextOverflow property to ensure that data labels present overflow text in a visually manageable way.

Examples

// The following example demonstrates setting the text overflow to Ellipse:
<SfAccumulationChart>
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
            <AccumulationDataLabelSettings Visible="true" MaxWidth="100" TextOverflow="LabelOverflow.Ellipse">
            </AccumulationDataLabelSettings>
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
</SfAccumulationChart>

TextWrap

Gets or sets the text wrap behavior for data labels in the SfAccumulationChart series. This property determines how text is handled when it overflows the point segment, slice, or specified MaxWidth.

Declaration

public TextWrap TextWrap { get; set; }

Property Value

Type	Description
TextWrap	Accepts a value from the TextWrap enumeration which specifies how text wrapping is managed. Options include: Normal: Breaks words only at allowed break points. Wrap: Breaks a word if it is too long to fit on a line by itself. AnyWhere: Allows breaking a word at any point if there are no acceptable break points in the line. The default value is TextWrap.Normal.

Remarks

Utilize the TextWrap property to control text wrapping in data labels, ensuring the text fits within defined constraints.

Examples

// The following example demonstrates setting the text wrap to Wrap:
<SfAccumulationChart>
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
            <AccumulationDataLabelSettings Visible="true" MaxWidth="100" TextWrap="TextWrap.Wrap">
            </AccumulationDataLabelSettings>
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
</SfAccumulationChart>

Visible

Gets or sets the visibility of the data label.

Declaration

public bool Visible { get; set; }

Property Value

Type	Description
System.Boolean	Accepts a boolean value. Set true to enable the data label; otherwise, false. The default value is false.

Remarks

Use the Visible property to control the visibility of data labels in the SfAccumulationChart series. When set to true, data labels will be displayed for data points in the chart.

Examples

// The following example demonstrates enabling data labels in the chart:
<SfAccumulationChart>
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
            <AccumulationDataLabelSettings Visible="true"></AccumulationDataLabelSettings>
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
</SfAccumulationChart>

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder