Class ChartDataLabel

Configures data labels for a series in SfChart.

Inheritance
System.Object
SfBaseComponent
ChartSubComponent
ChartDataLabel
Implements
System.IAsyncDisposable
Inherited Members
Namespace: Syncfusion.Blazor.Toolkit.Charts
Assembly: Syncfusion.Blazor.Toolkit.dll
Syntax
public class ChartDataLabel : ChartSubComponent, IAsyncDisposable, IChartElement, ISubcomponentTracker
Remarks

Place this component under a series' ChartMarker to configure the label's visibility, text or template, layout (position, alignment, margins, corner radius), style (fill, opacity, border, font), rotation, and overlap behavior. Property changes at runtime notify the renderer to refresh only the label layer.

Examples
@using Syncfusion.Blazor.Toolkit.Charts

<SfChart>
  <ChartSeries DataSource="@WeatherReports"
               XName="X"
               YName="Y"
               Type="ChartSeriesType.Column">
      <ChartMarker>
        <ChartDataLabel Visible="true"
                         Format="{value}°C"
                         Position="ChartLabelPosition.Outer"
                         Fill="#1b49cc"
                         Opacity="0.85"
                         LabelIntersectAction="Trim">
          <ChartDataLabelBorder Width="1" Color="white" />
          <ChartDataLabelMargin Top="6" Bottom="6" Left="8" Right="8" />
          <ChartDataLabelFont Size="12px" FontFamily="Segoe UI" Color="white" FontWeight="600" />
        </ChartDataLabel>
      </ChartMarker>
  </ChartSeries>
</SfChart>

@code {
  public class Weather
  {
      public string X { get; set; } = string.Empty;
      public double Y { get; set; }
  }

  public List<Weather> WeatherReports { get; set; } = new()
  {
      new Weather { X = "Mon", Y = 22 },
      new Weather { X = "Tue", Y = 24 },
      new Weather { X = "Wed", Y = 19 },
      new Weather { X = "Thu", Y = 27 },
      new Weather { X = "Fri", Y = 23 },
  };
}

Constructors

ChartDataLabel()

Declaration
public ChartDataLabel()

Properties

Alignment

Gets or sets the alignment for the label relative to the data point.

Declaration
public Alignment Alignment { get; set; }
Property Value
Type Description
Alignment

One of Alignment values. Default is Center.
Examples
<ChartDataLabel Visible="true" Alignment="Alignment.Near" />

Angle

Gets or sets the rotation angle (in degrees) for the label text.

Declaration
public double Angle { get; set; }
Property Value
Type Description
System.Double

A value in [-360, 360]. Default is 0.
Remarks

Takes effect only when EnableRotation is true. Out-of-range values are clamped.

Examples
<ChartDataLabel Visible="true" EnableRotation="true" Angle="90" />

Border

Gets or sets the border configuration for labels.

Declaration
public ChartDataLabelBorder Border { get; set; }
Property Value
Type Description
ChartDataLabelBorder

An instance of ChartDataLabelBorder. Default is a new instance.
Examples
<ChartDataLabel Visible="true">
  <ChartDataLabelBorder Width="2" Color="black" />
</ChartDataLabel>

EnableRotation

Gets or sets whether rotation is enabled for labels.

Declaration
public bool EnableRotation { get; set; }
Property Value
Type Description
System.Boolean

true to rotate labels using Angle; otherwise false.
Examples
<ChartDataLabel Visible="true" EnableRotation="true" Angle="45" />

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
<ChartDataLabel Visible="true" Fill="#2E77D0" />

Font

Gets or sets the font configuration for labels.

Declaration
public ChartDataLabelFont Font { get; set; }
Property Value
Type Description
ChartDataLabelFont

An instance of ChartDataLabelFont. Default is a new instance.
Examples
<ChartDataLabel Visible="true">
  <ChartDataLabelFont Size="14px" FontFamily="Arial" FontWeight="600" Color="#333" />
</ChartDataLabel>

Format

Gets or sets the format string for label values.

Declaration
public string Format { get; set; }
Property Value
Type Description
System.String

String with {value} placeholder and/or .NET format specifiers (e.g., "{value}°C", "{value:N1}").
Remarks

Applied when a Template is not used for the specific point.

Examples
<ChartDataLabel Visible="true" Format="{value}%" />

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
<ChartDataLabel Visible="true" LabelIntersectAction="Trim" />

Margin

Gets or sets the margin around the label background.

Declaration
public ChartDataLabelMargin Margin { get; set; }
Property Value
Type Description
ChartDataLabelMargin

An instance of ChartDataLabelMargin. Defaults to 5 on all sides.
Examples
<ChartDataLabel Visible="true">
  <ChartDataLabelMargin Top="10" Bottom="10" Left="12" Right="12" />
</ChartDataLabel>

Name

Gets or sets the field name from the data source used as the label text.

Declaration
public string Name { get; set; }
Property Value
Type Description
System.String

Mapping field name. Default is string.Empty.
Remarks

When specified, the chart uses the field's value from each data item as the label text for that point.

Examples
<ChartDataLabel Visible="true" Name="DisplayText" />

Opacity

Gets or sets the background opacity of the label.

Declaration
public double Opacity { get; set; }
Property Value
Type Description
System.Double

A value in [0, 1]. Default is 1.
Remarks

Values are clamped to the valid range to ensure consistent rendering.

Examples
<ChartDataLabel Visible="true" Opacity="0.65" />

Position

Gets or sets the label position relative to the data point.

Declaration
public ChartLabelPosition Position { get; set; }
Property Value
Type Description
ChartLabelPosition

One of ChartLabelPosition values. Default is Auto.
Examples
<ChartDataLabel Visible="true" Position="ChartLabelPosition.Outer" />

Rx

Gets or sets the horizontal corner radius for the label background.

Declaration
public double Rx { get; set; }
Property Value
Type Description
System.Double

Non-negative double. Default is 5.
Examples
<ChartDataLabel Visible="true" Rx="8" />

Ry

Gets or sets the vertical corner radius for the label background.

Declaration
public double Ry { get; set; }
Property Value
Type Description
System.Double

Non-negative double. Default is 5.
Examples
<ChartDataLabel Visible="true" Ry="8" />

Template

Gets or sets the template to render data labels.

Declaration
public RenderFragment<ChartDataPointInfo> Template { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.RenderFragment<ChartDataPointInfo>

A Microsoft.AspNetCore.Components.RenderFragment<> that renders rich content for each label.
Remarks

The template receives ChartDataPointInfo as the context. When a template is used, Format is not applied for that point.

Examples
<ChartDataLabel Visible="true">
  <Template Context="pt">
    <div style="padding:4px 6px;background:#303F9F;color:#fff;border-radius:4px;">
      @pt.X : @pt.Y
    </div>
  </Template>
</ChartDataLabel>

Visible

Gets or sets whether data labels are visible.

Declaration
public bool Visible { get; set; }
Property Value
Type Description
System.Boolean

true to show labels; otherwise false. Default is false.
Remarks

Toggling this calls the renderer to show or hide the labels without re-rendering the entire chart.

Examples
<ChartDataLabel Visible="true" />

Implements

System.IAsyncDisposable