DxChartAxisTitle.CssClass Property

Assigns a CSS class to the chart axis title.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public string CssClass { get; set; }

Property Value

Type	Description
String	CSS class names delimited by spaces.

Remarks

Apply CSS classes to customize the appearance of the chart axis title. Separate multiple class names with spaces.

Refer to the following help topics for general information on customizing the appearance of DevExpress web controls:

• How to use CSS to customize control appearance
• CSS Classes

The following code snippet applies the my-custom-class CSS class to the argument axis title:

<style>
    .my-custom-class {
       font-weight: 600 !important;
       text-transform: uppercase;
    }
</style>

<DxChart Data="DataSource" Width="600px" Height="300px">
    <DxChartLegend Visible="false" />
    <DxChartBarSeries ArgumentField="@((SaleInfo s)=>s.Date)"
                      ValueField="@((SaleInfo s)=>s.Amount)" />
    <DxChartArgumentAxis>
        <DxChartAxisTitle Text="Year"
                          CssClass="my-custom-class" />
    </DxChartArgumentAxis>
</DxChart>

An axis title is generated as a <text> element with predefined styles within the chart’s SVG structure. Custom CSS classes will be added to the class attribute of this <text> element.

<g class="dxc-arg-title">
    <text style="..." class="my-custom-class">Axis Title</text>
</g>

Predefined axis title styles are included in the style attribute of an SVG element. Due to their high specificity, these inline styles will override conflicting rules defined in your custom CSS class. For example, font-weight: 600 in your custom class will have no effect, as the axis title’s default inline style (font-weight: 400) takes precedence.

To resolve a conflict, inspect the element’s CSS rules with your browser’s developer tools. If you find a rule that conflicts with your custom class, add the !important flag to your custom CSS rule. For example, specify font-weight: 600 !important;. This flag forces the browser to override the normal cascade behavior and ensures that your CSS rule takes precedence over all other rules, including inline styles.
Use this approach cautiously, as it can significantly complicate CSS troubleshooting, especially in large stylesheets.

Since the axis title is an SVG element, certain appearance attributes differ from CSS properties used with standard HTML elements:

• Use the fill CSS property to change the text color instead of color.
• Use the HorizontalAlignment class property to adjust the title’s position in relation to the axis instead of text-align.
• The following common CSS properties have no effect on an axis title:
  • width and height;
  • line-height;
  • position;
  • top, right, bottom, and left;
  • margin and sub-properties (margin-top, margin-left, and so on);
  • padding and sub-properties (padding-top, padding-left, and so on);
  • border and sub-properties (border-width, border-radius, and so on);
  • overflow, overflow-x, and overflow-y;
  • z-index;
  • background styles: background-color, background-image, and so on;
  • text-shadow.

Tip

Use the DxChartFont component if you need to change only font properties (family, size, color, and so on).