ChartSeriesLabels
Configures the display and styling of data point labels within chart series. Controls label text formatting, positioning, appearance, and visibility to enhance data readability and provide immediate value information directly on the chart visualization. Children: ChartSeriesLabelsBorder, ChartSeriesLabelsMargin, ChartSeriesLabelsPadding, ChartSeriesLabelsFrom, ChartSeriesLabelsTo.
Definition
Namespace:Telerik.Blazor.Components
Assembly:Telerik.Blazor.dll
Syntax:
public class ChartSeriesLabels : DataVizChildComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposableInheritance: objectComponentBaseDataVizChildComponentChartSeriesLabels
Implements:
Inherited Members
Constructors
public ChartSeriesLabels()Properties
Specifies the horizontal and vertical alignment of labels relative to data points using ChartSeriesLabelsAlign values. Options control label positioning for optimal readability and visual balance, especially important for overlapping prevention in dense data visualizations.
[Parameter]
public ChartSeriesLabelsAlign? Align { get; set; }Specifies the name of the JavaScript function that returns custom ARIA content for accessibility support. The function should return descriptive text for each series point to enhance screen reader experience and meet accessibility requirements for data visualization.
[Parameter]
public string AriaTemplate { get; set; }Sets the background color for series data point labels using any valid CSS color value. Accepts hex codes (#FFFFFF), RGB values (rgb(255, 255, 255)), named colors (white, lightgray), or HSL values. Use contrasting backgrounds to ensure label text readability against chart backgrounds.
[Parameter]
public string Background { get; set; }[Parameter]
public RenderFragment ChildContent { get; set; }Sets the text color for series data point labels using any valid CSS color value. Accepts hex codes (#333333), RGB values (rgb(51, 51, 51)), named colors (black, white), or HSL values. Choose colors that provide sufficient contrast against label backgrounds for optimal readability.
[Parameter]
public string Color { get; set; }Controls the distance of labels from data points in pixels, specifically for donut and pie chart series. Use positive values (5-30 pixels) to move labels away from chart elements, or negative values to position labels closer to or inside chart segments.
[Parameter]
public double? Distance { get; set; }Defines the font styling for series labels using CSS font notation. Specify font size, family, and style like "12px Arial", "14px 'Segoe UI'", or "bold 16px sans-serif". Proper font selection ensures label readability and consistency with overall chart design.
[Parameter]
public string Font { get; set; }Specifies the display format for label values using Kendo format placeholders. Use {0} for main values, {1} for secondary values in multi-value series, {0:P} for percentages, {0:C} for currency, or custom patterns like "Value: {0:N2}". Different series types support different placeholder combinations for comprehensive data formatting.
[Parameter]
public string Format { get; set; }Determines the positioning strategy for labels relative to data points using ChartSeriesLabelsPosition values. Choose from options like above, below, left, right, or center to optimize label placement based on series type and data density for maximum clarity.
[Parameter]
public ChartSeriesLabelsPosition? Position { get; set; }Sets the rotation angle for series labels in degrees. Use values like 45, 90, -45, or 0 (default) to rotate label text for better space utilization or visual design. Positive values rotate clockwise, negative values rotate counterclockwise. Useful for angled labels in tight spaces or artistic designs.
[Parameter]
public string Rotation { get; set; }Defines a custom template for rendering series label content with access to data context properties. Use template syntax to display formatted data like "#= value #" for basic values, "#= kendo.format('{0:P}', percentage) #" for percentages, or complex HTML structures with conditional logic for rich label presentations.
[Parameter]
[Obsolete("\r\n The syntax with template literals, e.g. '#= dataItem.Value #' is now deprecated and will be removed in the future.\r\n You need to migrate to using the name of a JavaScript function that returns the value, e.g. Template='getTemplateValue'\r\n See https://www.telerik.com/blazor-ui/documentation/components/chart/labels-template-and-format#templates\r\n and https://www.telerik.com/blazor-ui/documentation/troubleshooting/csp#legacy-settings.\r\n ")]
public string Template { get; set; }Controls the visibility of series data point labels. Set to true to display labels on all data points, false to hide labels completely, or leave null for default behavior. Visible labels provide immediate data values but may clutter dense charts, so consider data density and chart size when enabling.
[Parameter]
public bool? Visible { get; set; }Methods
protected override void BuildRenderTree(RenderTreeBuilder __builder)Overrides:
protected override void OnInitialized()Overrides:
protected override void OnParametersSet()Overrides: