Skip to main content

Pane Title

  • 3 minutes to read

You can show a title above the pane to distinguish between multiple panes and provide information about series.

Chart Control - Pane Title

Demo: Grid Pane Layout

This topic explains how to do the following:

Add a Pane Title and Modify its Content

Each pane has one title. To display the title, set its Visibility property to True. The title includes a button that allows you to collapse and expand the pane. To show this button, set the XYDiagramPaneBase.RuntimeCollapse property (or the XYDiagram2D.RuntimePaneCollapse property) to True. If a user collapses a pane, other panes are resized to occupy all available space. Set the RuntimeCollapse property to False to hide the expand button and prevent users from collapsing panes.

Use the Text property to specify the title’s content. Its default value is the pane’s Name property value.


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

  1. Legend
  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 WebChartControl.AutoLayout property.

Add a Title at Design Time

You can configure a pane title’s options in the Properties window:

Chart Control - Add the Pane Title (Design Time)

Add a Title in Markup

The following markup specifies the text and visibility of a pane’s title:

<dx:WebChartControl ID="WebChartControl1" runat="server" ...>
        <dx:XYDiagram PaneDistance="20" RuntimePaneCollapse="False"...>
            <DefaultPane Title-Text="User Traffic / Average Response Time"
                         RuntimeCollapse="True" />
                    <dx:XYDiagramPane PaneID="0" Name="Visitors"
                                      Title-Text="Visitors" />

Add a Title in Code

Use the code below to set the pane’s title text and visibility at runtime:

XYDiagramPane pane = ((XYDiagram)WebChartControl1.Diagram).Panes["Visitors"];
pane.Title.Text = "Visitors";
pane.Title.Visibility = DefaultBoolean.True;
pane.RuntimeCollapse = DefaultBoolean.True;

Related API members:

Member Description
XYDiagramPaneBase.Title Returns the pane title settings.
Title.Text Gets or sets title content.
PaneTitle.Visibility Specifies whether the title is visible.

Align a Pane Title

You can align a pane title along the pane’s top edge and configure indents between the title and other chart elements.

Chart Control - Pane Title Alignment

The markup below specifies the alignment and margins:

<dx:XYDiagramPane ... Title-Alignment="Far" Title-Margins-Left="0" 
                      Title-Margins-Bottom="20" Title-Margins-Right="0" 

The following code customizes the alignment and margins at runtime:

    pane.Title.Alignment = System.Drawing.StringAlignment.Far;
    pane.Title.Margins.Left = 0;
    pane.Title.Margins.Top = 10;
    pane.Title.Margins.Right = 0;
    pane.Title.Margins.Bottom = 10;

Related API members:

Member Description
PaneTitle.Alignment Specifies the title’s alignment.
PaneTitle.Margins.Left Gets or sets the title’s left margin in pixels.
PaneTitle.Margins.Top Gets or sets the title’s upper margin in pixels.
PaneTitle.Margins.Right Specifies the title’s right margin in pixels.
PaneTitle.Margins.Bottom Gets or sets the title’s lower margin in pixels.

Customize a Title’s Text Appearance

Use the TitleBase.Font property to configure font parameters, and the TitleBase.TextColor property to change the title’s color.

Chart Control - Pane Title's Font

The markup below specifies the font options of the pane title:

<dx:XYDiagramPane ... Title-TextColor="Gray" Title-Font="Tahoma, 14">

The following code customizes the font settings at runtime:

pane.Title.Font = new Font("Tahoma", 14, FontStyle.Bold);
pane.Title.TextColor = Color.Gray;

Related API Members:

Property Description
TitleBase.Font Specifies the title’s font.
TitleBase.TextColor Defines the title’s text color.