Class ChartAxisLabelStyle

Provides the options to customize the text style of axis labels in a chart.

Inheritance
object
ComponentBase
OwningComponentBase
SfOwningComponentBase
ChartSubComponent
ChartDefaultFont
ChartAxisLabelStyle
Implements
Inherited Members
Namespace: Syncfusion.Blazor.Charts
Assembly: Syncfusion.Blazor.dll
Syntax
public class ChartAxisLabelStyle : ChartDefaultFont, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

Constructors

ChartAxisLabelStyle()

Declaration
public ChartAxisLabelStyle()

Properties

Color

Gets or sets the font color for axis labels.

Declaration
[Parameter]
public override string Color { get; set; }
Property Value
Type Description
string

A string representing the font color for axis labels. The default font color is determined by the chart's theme. By default, the theme is set to Material with a font color of rgba(97, 97, 97, 1).
Overrides
Remarks

Use valid hex or rgba CSS color strings for the color value.

Examples
// The following code demonstrates setting a custom font color for the axis.
<SfChart>
    <ChartPrimaryXAxis>
        <ChartAxisLabelStyle Color="red" />
    </ChartPrimaryXAxis>
    <ChartPrimaryYAxis>
        <ChartAxisLabelStyle Color="red" />
    </ChartPrimaryYAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" />
    </ChartSeriesCollection>
</SfChart>

FontFamily

Gets or sets the font family for axis labels.

Declaration
[Parameter]
public override string FontFamily { get; set; }
Property Value
Type Description
string

A string representing the font family for axis labels. 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 is used to specify the desired font family for axis labels, allowing for a consistent styling of text across your application.

Examples
// The following code demonstrates setting a custom font family for the axis.
<SfChart>
    <ChartPrimaryXAxis>
        <ChartAxisLabelStyle FontFamily="italic" />
    </ChartPrimaryXAxis>
    <ChartPrimaryYAxis>
        <ChartAxisLabelStyle FontFamily="italic" />
    </ChartPrimaryYAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" />
    </ChartSeriesCollection>
</SfChart>

FontWeight

Gets or sets the font weight for axis labels.

Declaration
[Parameter]
public override string FontWeight { get; set; }
Property Value
Type Description
string

A string representing the font weight for axis labels. The default font weight is determined by the chart's theme. By default, the theme is set to Material with a font weight of 400.
Overrides
Remarks

This property allows you to specify the thickness or boldness of the font used for rendering axis labels.
Common values include "Normal", "Bold", "Bolder", "Lighter", or numeric values such as 100, 200, ..., 900.

Examples
// The following code demonstrates setting a custom font weight for the axis.
<SfChart>
    <ChartPrimaryXAxis>
        <ChartAxisLabelStyle FontWeight="500" />
    </ChartPrimaryXAxis>
    <ChartPrimaryYAxis>
        <ChartAxisLabelStyle FontWeight="500" />
    </ChartPrimaryYAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" />
    </ChartSeriesCollection>
</SfChart>

Size

Gets or sets the font size for axis labels.

Declaration
[Parameter]
public override string Size { get; set; }
Property Value
Type Description
string

A string representing the font size for axis labels. The default font size for the axis labels is 12px.
Overrides
Remarks

This property allows you to specify the font size for rendering axis labels.

Examples
// The following code demonstrates setting a custom font size for the axis.
<SfChart>
    <ChartPrimaryXAxis>
        <ChartAxisLabelStyle Size="20px" />
    </ChartPrimaryXAxis>
    <ChartPrimaryYAxis>
        <ChartAxisLabelStyle Size="20px" />
    </ChartPrimaryYAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" />
    </ChartSeriesCollection>
</SfChart>

Implements