Pane Title

• Jun 28, 2021
• 3 minutes to read

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

Demo: Grid Pane Layout

This topic explains how to do the following:

• Add a Pane Title and Modify its Content
• Align a Pane Title
• Customize a Title’s Text Appearance

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.

Note

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:

Add a Title in Markup

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

ASPX

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

Add a Title in Code

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

C#

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

VB.NET

Dim pane As XYDiagramPane = CType(WebChartControl1.Diagram, XYDiagram).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.

The markup below specifies the alignment and margins:

ASPX

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

The following code customizes the alignment and margins at runtime:

C#

    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;

VB.NET

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.

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

ASPX

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

The following code customizes the font settings at runtime:

C#

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

VB.NET

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.