Chart Titles

  • 2 minutes to read

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

ChartsTitle

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

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

WPF_TitleByDefault

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

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

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

WPF_ChartTitleLayout

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

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

WPF_ChartTitleTemplate

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

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