Class ChartDataLabel

Provides options to customize the data label for the series.

Inheritance

System.Object

ChartDataLabel

Namespace: Syncfusion.Blazor.Charts

Assembly: Syncfusion.Blazor.dll

Syntax

public class ChartDataLabel : ChartSubComponent, IChartElement, ISubcomponentTracker

Constructors

ChartDataLabel()

Declaration

public ChartDataLabel()

Properties

Alignment

Gets or sets the alignment for the data labels.

Declaration

public Alignment Alignment { get; set; }

Property Value

Type	Description
Alignment	One of the Alignment enumerations that determines the position of the datalabel. Alignment options include: `Near`: Positions the data label to the right of the data points. `Center`: Centers the data label directly over the data points. `Far`: Places the data label to the left of the data points. The default value is Alignment.Center.

Remarks

This property sets the alignment of data labels in relation to the data points on a chart, allowing them to appear to the left, right, or center of the point.

Examples

// The following example demonstrates setting the alignment of data labels:
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column">
            <ChartMarker>
                <ChartDataLabel Visible="true" Alignment="Alignment.Near"></ChartDataLabel>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Angle

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

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:
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y">
            <ChartMarker>
                <ChartDataLabel Visible="true" EnableRotation="true" Angle="90"/>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Border

Gets or sets the options to customize the border of the data label.

Declaration

public ChartDataLabelBorder Border { get; set; }

Property Value

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

Remarks

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

Examples

// The following example demonstrates setting a custom border for data labels:
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Bar">
            <ChartMarker>
                <ChartDataLabel Visible="true">
                    <ChartDataLabelBorder Width="2" Color="blue"></ChartDataLabelBorder>
                </ChartDataLabel>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

EnableRotation

Gets or sets a value indicating whether rotation is enabled for the data label in the SfChart series.

Declaration

public bool EnableRotation { get; set; }

Property Value

Type	Description
System.Boolean	A boolean indicating if the rotation is enabled. The default value is false.

Remarks

When the EnableRotation property is set to true, data labels will be rotated based on the specified angle.

Examples

// The following code demonstrates how to enable rotation for data labels in an chart component:
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y">
            <ChartMarker>
                <ChartDataLabel Visible="true" EnableRotation="true" Angle="90"/>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Fill

Gets or sets the fill color of the datalabel.

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

The fill color is used to set the background color of the data label.

Examples

// The following example demonstrates setting a fill color for the data label background:
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y">
            <ChartMarker>
                <ChartDataLabel Visible="true" Fill="#1b49cc"/>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Font

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

Declaration

public ChartDataLabelFont Font { get; set; }

Property Value

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

Remarks

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

Examples

// The following example demonstrates setting a custom font style for data labels in a chart:
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y">
            <ChartMarker>
                <ChartDataLabel Visible="true">
                    <ChartDataLabelFont Size="16px" FontFamily="Arial" FontWeight="600" FontStyle="bold" Color="blue" Opacity=0.5></ChartDataLabelFont>
                <ChartDataLabel>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Format

Gets or sets the format for the data label text.

Declaration

public string Format { get; set; }

Property Value

Type	Description
System.String	A string specifying the format of the data label. The default value is `null`.

Remarks

Use the Format property to define the format for the data labels in the SfChart 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:
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y">
            <ChartMarker>
                <ChartDataLabel Visible="true" Format="{value}°C"/>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

LabelIntersectAction

Gets or sets the action for data label intersection.

Declaration

public string LabelIntersectAction { get; set; }

Property Value

Type	Description
System.String	A string representing the action to be taken when data labels intersect. The options include: `Hide`: Data labels that intersect will not be displayed. `Trim`: Data labels will be truncated to fit without intersection. `None`: No action is taken, labels will overlap if necessary. The default value is Hide.

Remarks

This property determines how overlapping data labels are managed on the chart.

Examples

// The following example demonstrates setting the action for data label intersection:
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Pie">
            <ChartMarker>
                <ChartDataLabel Visible="true" LabelIntersectAction="Trim"></ChartDataLabel>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Margin

Gets or sets the options to customize the margin for the data labels in the SfChart series.

Declaration

public ChartDataLabelMargin Margin { get; set; }

Property Value

Type	Description
ChartDataLabelMargin	Accepts the instance of the ChartDataLabelMargin class. The default value is a new instance of the ChartDataLabelMargin class with all margins set to 5.

Remarks

This property allows customization of the space surrounding the data label within a chart, including the SfChart series. It is particularly useful when the ChartDataLabelBorder is enabled.

Examples

// The following code snippet demonstrates setting custom margins for the data labels:
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y">
            <ChartMarker>
                <ChartDataLabel Visible="true">
                    <ChartDataLabelBorder Width="1" Color="black"></ChartDataLabelBorder>
                    <ChartDataLabelMargin Top="10" Bottom="10" Left="10" Right="10"></ChartDataLabelMargin>
                </ChartDataLabel>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Name

Gets or sets the name used for data label mapping in the SfChart series.

Declaration

public string Name { get; set; }

Property Value

Type	Description
System.String	A string representing the mapping name of the data label. 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 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:
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y">
            <ChartMarker>
                <ChartDataLabel Visible="true" Name="Text" />
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>
@code {
public class ChartData
{
    public double X { get; set; }
    public double Y { get; set; }
    public string Text { get; set; }
}
public List<ChartData> WeatherReports = new List<ChartData>
{
    new ChartData { X = 10, Y = 21, Text = "X:10 and Y:21" },
    new ChartData { X = 20, Y = 24, Text = "X:20 and Y:24" },
    new ChartData { X = 30, Y = 36, Text = "X:30 and Y:36" },
    new ChartData { X = 40, Y = 38, Text = "X:40 and Y:38" }
};
}

Opacity

Gets or sets the opacity of the datalabel.

Declaration

public double Opacity { get; set; }

Property Value

Type	Description
System.Double	A double representing the opacity level of the data label. Possible values range from 0 to 1. The default value is 1.

Remarks

This property specifies the transparency level of the data label background.

Examples

// This example demonstrates setting the opacity of a data label to 0.2:
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y">
            <ChartMarker>
                <ChartDataLabel Visible="true" Fill="#1b49cc" Opacity="0.2"/>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Position

Gets or sets the position of the data labels.

Declaration

public LabelPosition Position { get; set; }

Property Value

Type	Description
LabelPosition	One of the LabelPosition enumerations that determines the placement of the data label relative to the data points. Position options include: `Outer`: Positions the label outside the data point. `Top`: Positions the label on top of the data point. `Bottom`: Positions the label at the bottom of the data point. `Middle`: Positions the label in the middle of the data point. `Auto`: Automatically positions the label based on the series settings. The default value is LabelPosition.Auto.

Remarks

The position of the data labels determines where they are displayed relative to the data points in the SfChart series.

Examples

// The following example demonstrates setting the position of data labels:
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column">
            <ChartMarker>
                <ChartDataLabel Visible="true" Position="LabelPosition.Outer"></ChartDataLabel>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Rx

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

Declaration

public double Rx { get; set; }

Property Value

Type	Description
System.Double	A double value representing the horizontal width of the rounded corner. The default value is 5.

Remarks

This property affects the appearance of the corners of the data label's background. This property is applicable only when ChartDataLabelBorder is enabled.

Examples

// The following example demonstrates setting a horizontal radius for the data label corners:
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y">
            <ChartMarker>
                <ChartDataLabel Visible="true" Rx="10">
                    <ChartDataLabelBorder Width="1" Color="black"></ChartDataLabelBorder>
                </ChartDataLabel>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Ry

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

Declaration

public double Ry { get; set; }

Property Value

Type	Description
System.Double	A double value representing the vertical width of the rounded corner. The default value is 5.

Remarks

This property affects the appearance of the corners of the data label's background. This property is applicable only when ChartDataLabelBorder is enabled.

Examples

// The following example demonstrates setting a horizontal radius for the data label corners:
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y">
            <ChartMarker>
                <ChartDataLabel Visible="true" Ry="10">
                    <ChartDataLabelBorder Width="1" Color="black"></ChartDataLabelBorder>
                </ChartDataLabel>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Template

Gets or sets a template used to render data labels of the SfChart.

Declaration

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

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment<ChartDataPointInfo>	A Microsoft.AspNetCore.Components.RenderFragment<> representing the custom template for data labels.

Remarks

The Template property is used to define a custom template for data labels. Use the template's context parameter to access a ChartDataPointInfo and its fields.

Examples

// The following example demonstrates using a custom template to render data labels:
@using Syncfusion.Blazor.Charts
<SfChart>
   <ChartSeriesCollection>
       <ChartSeries DataSource = "@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Line">
           <ChartMarker>
               <ChartDataLabel Visible="true">
                   <Template>
                   @{
                       var data = context as ChartDataPointInfo;
                   }
                   <table>
                       <tr>
                           <td align="center" style="background-color: #C1272D"> 
                               @data.X : @data.Y
                           </td>
                       </tr>
                   </table>
                   </Template>
               </ChartDataLabel>
           </ChartMarker>
       </ChartSeries>
   </ChartSeriesCollection>
</SfChart>

Visible

Gets or sets a value indicating whether the data label is visible.

Declaration

public bool Visible { get; set; }

Property Value

Type	Description
System.Boolean	A boolean value is accepted. Set to `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 SfChart series.

Examples

// The following example demonstrates how to enable data labels in the chart:
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y">
            <ChartMarker>
                <ChartDataLabel Visible="true"/>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>