[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]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Panes Alignment

This document describes how existing panes can be arranged within a chart's diagram. Before reading this text, you may wish to review the basics of using panes in the ASP.NET Chart Control. To learn how additional panes can be created, refer to Adding Panes.

You can determine whether panes should be positioned in a row (horizontally) or in a column (vertically). To do this, use the XYDiagram2D.PaneLayoutDirection property, which is demonstrated in the following image.

PaneLayoutDirection = Horizontal

PaneLayoutDirection = Vertical

An important characteristic of a pane is its size, which can be defined in one of two ways: relative to another visible pane, or irrespective of them. To choose the required behavior, use the XYDiagramPaneBase.SizeMode property.

So, to define the pane's size absolutely, set the XYDiagramPaneBase.SizeMode property to PaneSizeMode.UseSizeInPixels. Assign the desired value to the XYDiagramPaneBase.SizeInPixels property, and the pane will maintain this size regardless of the chart diagram's size. Note that if the value overlaps the size of the diagram, the pane will occupy the entire diagram's area.


Because the sum of all pane sizes can exceed the available space, an increase in one pane's XYDiagramPaneBase.SizeInPixels property causes all panes with a fixed size to be decreased to fit into the chart's area.

Another option is to set the XYDiagramPaneBase.SizeMode property to PaneSizeMode.UseWeight. In this case, the actual size of the pane will be relative dependant on the values assigned to the XYDiagramPaneBase.Weight properties for other visible panes. These proportions will be maintained after resizing the chart. For example, if the weight is equal for all panes, their size will be similar.

The following images demonstrate the panes' behavior with different size modes set, when the chart is resized.

ChartControl.Width = 350

ChartControl.Width = 450

In addition, you can define the distance between panes (in pixels), via the XYDiagram2D.PaneDistance property.

Expanded See Also

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