ChartTitle
Configures the main title display for chart components with comprehensive styling options. Provides the primary heading that describes the chart's purpose, data, or context. Essential for creating professional, accessible charts that clearly communicate data meaning. Supports advanced formatting, positioning, and visual customization for optimal presentation. Children: ChartTitleBorder, ChartTitleMargin, ChartTitlePadding.
Definition
Namespace:Telerik.Blazor.Components
Assembly:Telerik.Blazor.dll
Syntax:
public class ChartTitle : DataVizChildComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposableInheritance: objectComponentBaseDataVizChildComponentChartTitle
Implements:
Inherited Members
Constructors
public ChartTitle()Properties
Specifies the horizontal alignment of the chart title text within its container. Controls how the title text is positioned relative to the chart width, affecting the overall visual balance. Use this to align the title with other chart elements or match your application's layout patterns. Accepts values from the ChartTitleAlign enumeration for consistent alignment options.
[Parameter]
public ChartTitleAlign? Align { get; set; }Sets the background color of the chart title area. Accepts any valid CSS color value including hex codes (#FF0000), RGB values (rgb(255,0,0)), color names (red), or RGBA for transparency. Use this to create visual emphasis, brand consistency, or improve title readability against complex chart backgrounds. Example: Set to "#f5f5f5" for a subtle gray background or "rgba(0,123,255,0.1)" for a semi-transparent blue tint.
[Parameter]
public string Background { get; set; }[Parameter]
public RenderFragment ChildContent { get; set; }Sets the text color of the chart title. Accepts any valid CSS color value including hex codes (#333333), RGB values (rgb(51,51,51)), or color names (black). Use this to ensure title text has appropriate contrast and visibility, matching your application's design theme. Example: Set to "#2c3e50" for a professional dark gray, or "#ffffff" when using dark background colors.
[Parameter]
public string Color { get; set; }Provides an accessible description of the chart for screen readers and assistive technologies. This text is announced when screen readers focus on the chart, helping visually impaired users understand the chart's purpose and content. Use this to describe what the chart shows, its main insights, or important data trends for better accessibility compliance. Example: Set to "Monthly sales data showing 15% growth over the last quarter" for a sales trend chart.
[Parameter]
public string Description { get; set; }Sets the font properties for the chart title text using CSS font syntax. Accepts standard CSS font shorthand notation including font-weight, font-size, and font-family. Use this to control title typography, ensuring it matches your application's design system and hierarchy. Example: Set to "bold 18px Arial" for a prominent title, or "normal 14px 'Segoe UI'" for a subtle header.
[Parameter]
public string Font { get; set; }Specifies where the chart title is positioned relative to the chart area. Controls the vertical placement of the title, allowing it to appear above or below the chart content. Use this to optimize chart layout and ensure the title doesn't interfere with data visualization. Accepts values from the ChartTitlePosition enumeration for standard positioning options.
[Parameter]
public ChartTitlePosition? Position { get; set; }Sets the text content displayed as the chart title. This is the main heading that appears at the top of your chart, typically describing what data is being visualized. Use clear, descriptive text that helps users understand the chart's purpose and content at a glance. Example: Set to "Quarterly Revenue Growth" for a financial chart, or "Website Traffic by Source" for analytics data.
[Parameter]
public string Text { get; set; }Controls whether the chart title is displayed or hidden. When set to true, the title and its configured styling will be visible. When false, the title is completely hidden. Use this to dynamically show or hide titles based on user preferences, screen size, or chart context. Example: Set to false for embedded charts where external headings are used, or true for standalone chart displays.
[Parameter]
public bool? Visible { get; set; }Methods
protected override void BuildRenderTree(RenderTreeBuilder __builder)Overrides:
protected override void OnInitialized()Overrides:
protected override void OnParametersSet()Overrides: