[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
   Getting Started
  [Expand]Grid View
  [Expand]Tree List
  [Expand]Card View
  [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
     [Collapse]Axes
       Axes Overview
       Axis Scale Types
       Visual Ranges and Whole Ranges
       Primary and Secondary Axes
       Grid Lines,Tickmarks and Interlacing
       Axis Appearance and Position
       Axis Titles
       Axis Labels
       Strips
       Constant Lines
       Scale Breaks
     [Expand]Panes
     [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]Pivot Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Scheduler
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Gauges
  [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]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]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Primary and Secondary Axes

This document describes the difference between primary and secondary axes, and how secondary axes can be created and assigned to a series. Before you proceed with this document, you may wish to review the basics of using axes.

The document consists of the following sections.

Expanded Understanding Primary and Secondary Axes

By default, a chart's diagram contains two primary axes - the axis of arguments (X-axis) and the axis of values (Y-axis). To access them at design time, expand the WebChartControl.Diagram property in the Properties window.

For each chart, it is possible to plot only a single primary axis of each type (a single X-axis and a single Y-axis). However, in some scenarios these axes are not sufficient, and it is necessary to use secondary axes. Secondary axes are supported only for the most common diagram type - XY-Diagram 2D. This may be needed if, for example, it is required to display series of a significantly different range of values, or series with entirely different arguments (or values), within a single diagram.

Another common scenario when secondary axes are useful is when series are distributed among multiple panes. Most often, in this case it is necessary to plot a primary axis through all panes, and create a secondary axis for each additional pane. For more information on this, refer to the Panes Overview topic.

A key difference between primary and secondary axes is that you can have only one primary axis, but you can create an unlimited number of secondary axes.

Another notable difference between primary and secondary axes concerns axis alignment. In particular, for the Axis2D.Alignment property, the AxisAlignment.Zero setting is available for primary axes only. To learn more on this, refer to Axis Appearance and Position.

Primary and secondary axes are similar in other aspects. This means that their appearance and layout can be customized in the same way, and they can have similar additional elements (such as grid lines, constant lines and titles). For general information about customizing axes, refer to Axes.

To learn how secondary axes can be created and associated with series, refer to the next section of this document.

Expanded Add Secondary Axes

The simplest way to create a secondary axis and assign it to a series is to use the Series Collection Editor. To customize the secondary axis, do the following.

  • Invoke the Series Collection Editor by clicking the Series... ellipsis button in the Properties window.
  • In the Series Collection Editor, switch to the Properties tab and expand the series view.
  • Then click the XYDiagramSeriesViewBase.AxisX (or XYDiagramSeriesViewBase.AxisY) combo box.
  • To add a new secondary axis to the diagram's collection and assign it to this series, click New axis, as shown below.

  • The assigned secondary axis appears on the diagram.

Next, you can customize the secondary axis, e.g., replace it by setting its Axis2D.Alignment property to AxisAlignment.Far (as opposed to AxisAlignment.Near, which is the default setting).

If your chart's diagram contains multiple panes, a secondary axis is automatically displayed in the pane associated with the series to which the secondary axis belongs. To learn more on this, refer to Panes Overview.

Secondary axes reside in the diagram's collections, returned by the XYDiagram.SecondaryAxesX and XYDiagram.SecondaryAxesY properties. To access these collections, expand the WebChartControl.Diagram property in the Properties window, and click the ellipsis button for the appropriate property.

The Secondary Axis Collection Editor will appear.

In this dialog, you can add or remove the collection's items using the appropriate buttons, and customize secondary axes as required. Note that the set of available properties for secondary axes is identical to the properties of the primary axes. To learn more about them, refer to the Axes and Axis Appearance and Position topics.

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

Expanded See Also

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