Pane Title
- 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
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:
- Legend
- Axis Titles
- Series Titles
- Pane Titles
- Axes
- Chart Title
- 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:
<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:
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.
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"
Title-Margins-Top="10">
</dx:XYDiagramPane>
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.
The markup below specifies the font options of the pane title:
<dx:XYDiagramPane ... Title-TextColor="Gray" Title-Font="Tahoma, 14">
</dx:XYDiagramPane>
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. |