Skip to main content

Axis Titles

  • 2 minutes to read

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

WPF_AxisTitlesOverview

This document consists of the following sections:

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:

<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.

AxisTitleCustomization

The following XAML markup shows how to do this:

<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.
See Also