Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
  [Expand]Reporting
  [Collapse]Chart Control
   [Expand]Product Information
   [Expand]Getting Started
   [Expand]Fundamentals
   [Collapse]Concepts
    [Expand]Creating Charts
    [Collapse]Chart Elements
     [Expand]Series
     [Expand]Diagram
     [Expand]Axes
     [Collapse]Panes
       Panes Overview
       Adding Panes
       Panes Alignment
       Panes Appearance
     [Expand]Legend
     [Expand]Chart Titles
     [Expand]Annotations
     [Expand]Indicators
    [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]Examples
  [Expand]Grid View
  [Expand]Card View
  [Expand]Vertical Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Expand]Site Navigation and Layout
  [Expand]File Management
  [Expand]Multi-Use Site Controls
  [Expand]Scheduler
  [Expand]HTML Editor
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gauges
  [Expand]Data Editors
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [Expand]Localization
 [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]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[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.

Note

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

How would you rate this topic?​​​​​​​