Class ChartTitleStyle

Provides options to customize the title style of the chart.

Inheritance
System.Object
ChartSubComponent
ChartDefaultFont
ChartTitleStyle
Inherited Members
Namespace: Syncfusion.Blazor.Charts
Assembly: Syncfusion.Blazor.dll
Syntax
public class ChartTitleStyle : ChartDefaultFont, ISubcomponentTracker, IChartDefaultFont

Constructors

ChartTitleStyle()

Declaration
public ChartTitleStyle()

Properties

AccessibilityDescription

Gets or sets the accessibility description for the chart title.

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

Accepts a string that defines the accessibility description for the chart title. The default value is an empty string.
Remarks

Use this property to provide an accessibility description for screen readers and other assistive technologies.

Examples
// The following code demonstrates setting an accessibility description for the chart title:
<SfChart Title="Chart">
    <ChartTitleStyle AccessibilityDescription="This is the chart title" />
</SfChart>

AccessibilityRole

Gets or sets the accessibility role for the chart title.

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

Accepts a string that defines the accessibility role for the chart title. The default value is null.
Remarks

Use this property to provide an accessibility role for the chart title.

Examples
// The following code demonstrates setting an accessibility role for the chart title:
<SfChart Title="Chart">
    <ChartTitleStyle AccessibilityRole="heading" />
</SfChart>

Focusable

Gets or sets the accessibility keyboard navigation focus option for the chart title.

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

Accepts the boolean value to enable or disable the keyboard navigation for the chart title. The default value is true.
Remarks

Use this property to toggle the keyboard navigation focus for the chart title.

Examples
// The following code demonstrates setting the keyboard navigation focus for the chart title:
<SfChart Title="Chart">
    <ChartTitleStyle Focusable="false" />
</SfChart>

FontFamily

Gets or sets the font family of the chart title.

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

A string representing the font family of the chart title. The default font family is determined by the chart's theme. By default, the theme is set to Material with the font family Roboto.
Overrides
Remarks

This property allows customization of the font family for the chart title, providing flexibility in text appearance and style.

Examples
// The following code demonstrates setting a custom font family for the title text:
<SfChart Title="Chart">
    <ChartTitleStyle FontFamily="italic" />
</SfChart>

FontWeight

Gets or sets the font weight of the chart title.

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

A string representing the font weight of the title text. The default font weight is determined by the SfChart theme. By default, the theme is set to Material with title font weight of 600.
Overrides
Remarks

The font weight can be a number (100 to 900), or a keyword such as 'normal', 'bold', 'bolder', or 'lighter'.

Examples
// The following code demonstrates setting a custom font weight for the title text:
<SfChart Title="Chart">
    <ChartTitleStyle FontWeight="400" />
</SfChart>

Position

Defines the position of the chart title and subtitle.

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

An enum value representing the position of the title. The default value is 'Top'.
Remarks

Available options:

  • TopDisplays the title and subtitle at the top of the chart.
  • LeftDisplays the title and subtitle on the left side of the chart.
  • BottomDisplays the title and subtitle at the bottom of the chart.
  • RightDisplays the title and subtitle on the right side of the chart.
  • CustomDisplays the title and subtitle based on the specified X and Y coordinates.
Examples
// The following code demonstrates setting the position of the title.
<SfChart Title="Sales Data" SubTitle="2023 Overview">
    <ChartTitleStyle Position="ChartTitlePosition.Right" />
</SfChart>

Size

Gets or sets the font size of the chart title.

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

A string representing the font size of the chart title. The default size is determined by the SfChart theme. By default, the theme is set to Material with a title text size of 16px.
Overrides
Remarks

Use the Size property to change the font size of title text in the SfChart. The size value accepts standard CSS font size specifications such as 'px', 'em', etc.

Examples
// The following code demonstrates setting a custom font size for the title text:
<SfChart Title="Chart">
    <ChartTitleStyle Size="20px" />
</SfChart>

X

Defines the X coordinate for the chart title and subtitle.

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

A double value representing the horizontal position. The default value is 0.
Remarks

This property is applicable only when the position is set to Custom.

Examples
// The following code demonstrates setting the X coordinate for the chart title.
<SfChart Title="Sales Data" SubTitle="2023 Overview">
    <ChartTitleStyle Position="ChartTitlePosition.Custom" X="40" />
</SfChart>

Y

Defines the Y coordinate for the chart title and subtitle.

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

A double value representing the vertical position. The default value is 0.
Remarks

This property is applicable only when the position is set to Custom.

Examples
// The following code demonstrates setting the Y coordinate for the chart title.
<SfChart Title="Sales Data" SubTitle="2023 Overview">
    <ChartTitleStyle Position="ChartTitlePosition.Custom" Y="40" />
</SfChart>