Axis Titles

• Aug 24, 2023
• 2 minutes to read

The 2D XY Diagram‘s axes (both primary and secondary ones) can have a title.

This document consists of the following sections:

• How to Add a Title to an Axis
• How to Modify Title Appearance

Note

The Chart Control can hide its elements if there is insufficient space to display them. Elements are hidden in the following order:

1. Legends
2. Axis Titles
3. Series Titles
4. Pane Titles
5. Axes
6. Chart Title
7. Breadcrumbs

To make the Chart Control always display its elements, disable the ChartControl.AutoLayout property.

How to Add a Title to an Axis

The markup below shows how to create titles for x- and y-axes and specify their content:

XAML

<dxc:XYDiagram2D>
    <dxc:XYDiagram2D.AxisX>
        <dxc:AxisX2D>
            <dxc:AxisX2D.Title>
                <dxc:AxisTitle Content="Year"/>
            </dxc:AxisX2D.Title>
        </dxc:AxisX2D>
    </dxc:XYDiagram2D.AxisX>
    <dxc:XYDiagram2D.AxisY>
        <dxc:AxisY2D>
            <dxc:AxisY2D.Title>
                <dxc:AxisTitle Content="Oil Price (USD)"/>
            </dxc:AxisY2D.Title>
        </dxc:AxisY2D>
    </dxc:XYDiagram2D.AxisY>
<!--...-->
</dxc:XYDiagram2D>

Use the following classes and properties to configure axis titles:

Class or Property	Description
XYDiagram2D	The XY Diagram.
XYDiagram2D.AxisX	Gets or sets an x-axis.
XYDiagram2D.AxisY	Gets or sets a y-axis.
AxisX2D	An x-axis.
AxisY2D	A y-axis.
Axis.Title	Gets or sets the axis title’s options.
AxisTitle	The axis title.
TitleBase.Content	The axis title’s content.

How to Modify Title Appearance

The Chart control makes it possible to alter the axis title’s appearance in different ways. For example, you can assign a DataTemplate object to the TitleBase.ContentTemplate property.

The following XAML markup shows how to do this:

XAML

<Window.Resources>
    <DataTemplate x:Key="axisTitle">
        <TextBlock Text="{Binding}"
                   Foreground="Black" 
                   FontFamily="SegoeUI"
                   FontStyle="Italic" 
                   FontSize="16" 
                   FontWeight="Medium" 
                   FontStretch="Normal">
        </TextBlock>
    </DataTemplate>
</Window.Resources>
<!--...-->
<dxc:XYDiagram2D.AxisY>
    <dxc:AxisY2D>
        <dxc:AxisY2D.Title>
            <dxc:AxisTitle Content="Oil Price (USD)" 
                           ContentTemplate="{StaticResource axisTitle}"
                           Alignment="Center"/>
        </dxc:AxisY2D.Title>
    </dxc:AxisY2D>
</dxc:XYDiagram2D.AxisY>

Use the following properties to apply a data template for axis title customization:

Property	Description
TitleBase.Content	Specifies a axis title content.
TitleBase.ContentTemplate	Gets or sets a template that specifies how the title looks.
AxisTitle.Alignment	Gets or sets the axis title’s alignment.