Chart Titles

Aug 24, 2023
3 minutes to read

The Chart control allows you to display any number of titles and configure their appearance and position.

Note

Note that the Pie, Donut, and Funnel series can have an individual title. Refer to the Series Titles document to learn more about them.

This document consists of the following sections.

How to Add a Chart Title
How to Customize a Title Layout
How to Customize Title Content Appearance Using a Data Template

Note

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

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

How to Add a Chart Title

Chart titles can be located in different sides of a diagram. By default, the title occupies a position in the top left corner.

You can use the markup below to add a chart title with specified text.

XAML

xaml

<dxc:ChartControl.Titles>
        <dxc:Title Content="Weather in London"/>
</dxc:ChartControl.Titles>

The following table lists the classes and properties that are used in the code above.

Class or Property	Description
ChartControlBase.Titles	A collection of chart titles.
Title	An individual chart title.
TitleBase.Content	Title content.

To always display a title in a chart, set the TitleBase.Visible property to true.

XAML

xaml

<dxc:ChartControl.Titles>
        <dxc:Title Content="Weather in London"
                   Visible="True"/>
</dxc:ChartControl.Titles>

How to Customize a Title Layout

If the default title layout does not fulfill your requirements, modify a title position.

Use the markup below to place a title at the chart’s bottom right corner.

XAML

xaml

<dxc:ChartControl.Titles>
    <dxc:Title Content="Weather in London" 
               Dock="Bottom" 
               HorizontalAlignment="Right"
               VerticalAlignment="Bottom"/>
</dxc:ChartControl.Titles>

In the above example, the following classes and properties are used.

Class or Property	Description
ChartControlBase.Titles	A collection of chart titles.
Title	An individual chart title.
TitleBase.Content	Title content.
Title.Dock	Specifies the parent container’s side, to which the title is docked.
TitleBase.HorizontalAlignment	Specifies the horizontal alignment of the title.
TitleBase.VerticalAlignment	Specifies the vertical alignment of the title.

How to Customize Title Content Appearance Using a Data Template

You can modify chart title appearance using a DataTemplate object.

To modify a title using a data template, refer to the example below.

XAML

xaml

<dxc:ChartControl.Titles>
    <dxc:Title Visible="True" 
               HorizontalAlignment="Center">
        <dxc:Title.Content>
            <local:TitleItem Text="Weather in London"
                             ImageSource="Images/bigben.jpg"/>
        </dxc:Title.Content>
        <dxc:Title.ContentTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Label Grid.Column="0" 
                           Margin="0,0,4,0" 
                           Content="{Binding Text}"/>
                    <Image Grid.Column="1" 
                           Width="32" 
                           Height="32">
                        <Image.Source>
                            <BitmapImage UriSource="{Binding ImageSource}"/>
                        </Image.Source>
                    </Image>
                </StackPanel>
            </DataTemplate>
        </dxc:Title.ContentTemplate>
    </dxc:Title>
</dxc:ChartControl.Titles>

In the above example, the following classes and properties are used.

Class or Property	Description
TitleBase.ContentTemplate	Specifies a template that configures how title content should look like.
DataTemplate	A template.