DxTitleSettings Class

Contains title settings.

Assembly: DevExpress.Blazor.v24.2.dll

Declaration

public class DxTitleSettings :
    TitleBaseSettings

Remarks

Use DxTitleSettings objects to customize title settings for the following components:

DxBarGauge: A component that visualizes data as circular bars where each bar indicates a single value.
DxSankey: A component that depicts value flow between two entity sets.
DxRangeSelector: An interactive component that visualizes data on a linear scale and allows users to select a value range.

To display the target component’s title, add a DxTitleSettings object to component markup and specify the Text property.

Component-Level Settings

The DxTitleSettings component allows you to specify the following properties at the component level:

Text: Specifies title text.
PlaceholderSize: Reserves an area for the title and its subtitle.
HorizontalAlignment | VerticalAlignment: Position the title and its subtitle in the legend pane.
TextOverflow | WordWrap: Specify how to display overflowing title text.

Nested Objects

In addition to component-level settings, you can also add the following objects to the DxTitleSettings markup:

DxSubtitleSettings: Contains subtitle settings.
DxFontSettings: Contains the element’s font settings.
DxMarginSettings: Contains settings for the element’s margins.

Example

The following code snippet customizes the Bar Gauge‘s title and subtitle:

Bar Gauge - Title and Subtitle Customization

<DxBarGauge Width="100%"
            Height="500px"
            StartValue="0"
            EndValue="100"
            Values="@Values">
    <DxTitleSettings Text="Custom Title"
                     VerticalAlignment="VerticalEdge.Bottom">
        <DxFontSettings Size="28" Weight="600" />
        <DxSubtitleSettings Text="Custom Subtitle">
            <DxFontSettings Opacity="0.5" Weight="500" />
        </DxSubtitleSettings>
    </DxTitleSettings>
    @* ... *@
</DxBarGauge>

@code {
    double[] Values = new double[] { 47.27, 65.32, 84.59, 81.86, 99 };
    // ...
}