[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
   Getting Started
  [Expand]Grid View
  [Expand]Tree List
  [Expand]Card View
  [Collapse]Chart Control
   [Expand]Product Information
   [Expand]Getting Started
    [Expand]Creating Charts
    [Collapse]Chart Elements
       Panes Overview
       Adding Panes
       Panes Alignment
       Panes Appearance
     [Expand]Chart Titles
    [Expand]End-User Interaction
     Supported Browsers
     Adding a Web Chart
     Handling Client-side Scripts
     Medium Trust Support
     Web Farm and Web Gardens Support
   [Expand]Design-Time Features
   [Expand]Visual Elements
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Vertical Grid
  [Expand]Data Editors
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Controls
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Adding Panes

This document describes how new panes can be added to a chart's diagram at design time. Before reading this text, you may wish to review the basics of using panes in the ASP.NET Chart Control.

This document consists of the following sections.

Expanded Adding Panes

To quickly assign a new pane to a series at design time, do the following.

  • Invoke the Series Collection Editor by clicking the Series ellipsis button in the Properties window.

  • Switch to the Properties tab in the Series Collection Editor, expand the series view and locate the XYDiagramSeriesViewBase.Pane property.
  • Click New pane in the drop-down menu of the XYDiagramSeriesViewBase.Pane property.

  • Click Close, to apply the changes and quit the dialog.

    Then, a new pane with default settings will be created and associated with the current series, automatically.

Additional panes reside in the diagram's collection, which can be accessed from the XYDiagram2D.Panes property. So, if you need to access the collection of panes (to create a new additional pane, or to customize the existing ones) at design time, select your chart, and in the Properties window, expand the WebChartControl.Diagram property. In the list of its options, locate the XYDiagram2D.Panes property and click its ellipsis button.

This invokes the Pane Collection Editor.

In this dialog, click Add to create a new pane, and then use the available properties to customize its size and appearance. These properties are briefly described in the Panes Alignment and Panes Appearance topics.

To apply the changes and quit the dialog, click Close.

Then, to associate the created pane with an existing series, assign the pane to this series using the XYDiagramSeriesViewBase.Pane property in the Properties tab of the Series Collection Editor. To learn more on how to invoke this editor at design time, see the Adding Panes document section.

To apply the changes and quit the dialog, click Close. After that, the chart should look like the following.

Expanded Examples

Is this topic helpful?​​​​​​​