[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications, and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gantt Control
  [Collapse]Chart Control
   [Expand]Getting Started
   [Expand]Charting Basics
   [Expand]Series Views
   [Expand]Chart Elements
   [Expand]Providing Data
   [Expand]Data Representation
   [Expand]Appearance Customization
   [Expand]End-User Features
   [Expand]Design-Time Features
   [Expand]Visual Elements
    [Expand]Creating Charts
    [Collapse]Chart Elements
      How to: Add Titles to a Chart
      How to: Enable Word Wrapping for Chart Titles
      How to: Create a Multi-Pane Chart
      How to: Display a Series in an Additional Pane (Runtime Sample)
      How to: Display Automatically Created Series in Separate Panes
      How to: Add a Title to an Axis
      How to: Determine whether an Axis Title is Being Hovered by the Mouse Pointer
      How to: Add Secondary Axes to a Chart
      How to: Customize an Axis Range
      How to: Create Custom Axis Labels
      How to: Individually Customize Axis Labels
      How to: Add a Constant Line to an Axis
      How to: Add a Strip to an Axis
      How to: Enable Automatic Scale Breaks for an Axis
      How to: Manually Insert a Scale Break into an Axis
      How to: Manually Insert a Scale Break into an Axis (Runtime Sample)
      How to: Show Numerical Data Using a Logarithmic Scale
      How to: Add a Trend Line to a Chart
      How to: Add a Fibonacci Indicator to a Chart
      How to: Add a Fibonacci Indicator to a Chart (Runtime Sample)
      How to: Show a Regression Line for a Stock Chart
      How to: Show a Regression Line for a Stock Chart (Runtime Sample)
      How to: Plot the Fixed Value Error Bars Indicator on a Chart
      How to: Plot the Standard Error Bars Indicator on a Chart
      How to: Plot the Percentage Error Bars Indicator on a Chart
      How to: Plot the Standard Deviation Error Bars Indicator on a Chart
      How to: Plot the Data Source Based Error Bars Indicator on a Chart
      How to: Create Custom Legend Radio Buttons to Control Visibility of a Chart Series
      How to: Create an Image Annotation Anchored to a Chart or Pane
      How to: Add an Annotation at Runtime
      How to: Create a Text Annotation Anchored to a Series Point
      How to: Add an Additional Legend to a Chart
      How to: Add a Legend Title
      How to: Add a Custom Legend Item
    [Expand]End-User Interaction
    [Expand]Producing Output
   [Expand]Additional Resources
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[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)

How to: Create a Multi-Pane Chart

The following example demonstrates how to create a chart with multiple series placed in separate panes.

For the purpose of simplicity, in this tutorial, data for the chart's series is set manually. However, in the real-life charts, it's possible to use any other type of a datasource.

This topic consists of the following sections:

Expanded Create a Chart and Provide Its Data

  1. Start MS Visual Studio (2008 or 2010), and create a new Windows Forms Application, or open an existing one.
  2. Drop the ChartControl onto the form. Note that in this instance the Chart Wizard may be invoked (in case its "Show wizard every time a new chart is added" option is enabled). In this example, we don't need to use the wizard, so click the Cancel button to close the wizard's window and manually customize the ChartControl.


    To fit the ChartControl on the form in which it is contained, set its Dock property to Fill.

  3. In the Properties window, locate the Series item and click its ellipsis button. The Series Collection Editor dialog will be invoked.

    In this dialog, click Add..., to create a new series of the bar view type. Then, click Copy two times, to create two more similar series.

    Define the data for these series as shown in the following table.

    Argument Series 1 value Series 2 value Series 3 value
    1 1 3 2
    2 2 1 3
    3 3 2 1

    To apply the changes, click Close.

Expanded Create and Customize Panes

  1. Select the Series2 element in the chart. Then, invoke the drop-down list of the Series2.View.Pane property, and click the New Pane button there. Now, a new pane (named Pane1) is created and the selected series is placed on it.

    Repeat this procedure for the Series3, so that it is placed in the Pane2.

  2. Select the DefaultPane element, and set its XYDiagramPaneBase.Weight property to 1.5, XYDiagram2D.PaneLayoutDirection to Horizontal, XYDiagram.Rotated to true and XYDiagram2D.PaneDistance to 5.
  3. Select the Axis X element. In the Property window, locate the VisibleInPanes property and click its ellipsis button. In the invoked Axis Visibility dialog, check DefaultPane, so that only the current axis is shown in it.

    Also, for the AxisX, you can set the Axis.Reverse property to true, so that arguments are displayed descending from top to bottom.

Expanded Get the Result

The complete chart is shown in the following image.

Expanded See Also

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