How to: Display Secondary XY Axes in a Chart

• Feb 21, 2025
• 3 minutes to read

The following example creates secondary XY axes and displays them within a Chart control.

C#

using DevExpress.XtraCharts;
using DevExpress.Utils;
using System.Drawing;
using System.Windows.Forms;

namespace DXApplication_SecondaryAxesChart {
    public partial class Form1 : DevExpress.XtraEditors.XtraForm {
        ChartControl chartControl1;
        Series series1, series2;
        public Form1() {
            InitializeComponent();
            // Initialize a Chart control.
            chartControl1 = new ChartControl(){ Dock = DockStyle.Fill };

            // Initialize series.
            series1 = new Series("Series 1", ViewType.Bar);
            series2 = new Series("Series 2", ViewType.Line);

            // Add points to series.
            series1.Points.AddRange(new SeriesPoint[] {
                new SeriesPoint("A", 10),
                new SeriesPoint("B", 12),
                new SeriesPoint("C", 17),
                new SeriesPoint("D", 14)});

            series2.Points.AddRange(new SeriesPoint[] {
                new SeriesPoint("I", 1500),
                new SeriesPoint("II", 1800),
                new SeriesPoint("III", 2500),
                new SeriesPoint("IV", 3300) });

            // Add series to the Chart control.
            chartControl1.Series.AddRange(new Series[] { series1, series2 });

            // Create secondary X and Y axes and display them within the Chart control.
            SecondaryAxisX secondaryAxisX = new SecondaryAxisX();
            SecondaryAxisY secondaryAxisY = new SecondaryAxisY();

            ((XYDiagram)chartControl1.Diagram).SecondaryAxesX.Add(secondaryAxisX);
            ((XYDiagram)chartControl1.Diagram).SecondaryAxesY.Add(secondaryAxisY);

            // Assign the 'series2' to secondary XY axes.
            ((LineSeriesView)series2.View).AxisX = secondaryAxisX;
            ((LineSeriesView)series2.View).AxisY = secondaryAxisY;

            // Customize the appearance of secondary axes (optional).
            secondaryAxisX.Title.Text = "Secondary X-Axis";
            secondaryAxisX.Title.Visibility = DefaultBoolean.True;
            secondaryAxisX.Title.TextColor = Color.Red;
            secondaryAxisX.Label.TextColor = Color.Red;
            secondaryAxisX.Color = Color.Red;

            secondaryAxisY.Title.Text = "Secondary Y-Axis";
            secondaryAxisY.Title.Visibility = DefaultBoolean.True;
            secondaryAxisY.Title.TextColor = Color.Blue;
            secondaryAxisY.Label.TextColor = Color.Blue;
            secondaryAxisY.Color = Color.Blue;

            // Hide the legend (optional).
            chartControl1.Legend.Visibility = DefaultBoolean.False;

            // Add the Chart control to the Form.
            Controls.Add(chartControl1);
        }
    }
}

VB.NET

Imports DevExpress.XtraCharts
Imports DevExpress.Utils
Imports System.Drawing
Imports System.Windows.Forms

Namespace DXApplication_SecondaryAxesChart
    Partial Public Class Form1
        Inherits DevExpress.XtraEditors.XtraForm

        Private chartControl1 As ChartControl
        Private series1, series2 As Series
        Public Sub New()
            InitializeComponent()
            ' Initialize a Chart control.
            chartControl1 = New ChartControl() With {.Dock = DockStyle.Fill}

            ' Initialize series.
            series1 = New Series("Series 1", ViewType.Bar)
            series2 = New Series("Series 2", ViewType.Line)

            ' Add points to series.
            series1.Points.AddRange(New SeriesPoint() {
                New SeriesPoint("A", 10),
                New SeriesPoint("B", 12),
                New SeriesPoint("C", 17),
                New SeriesPoint("D", 14)
            })

            series2.Points.AddRange(New SeriesPoint() {
                New SeriesPoint("I", 1500),
                New SeriesPoint("II", 1800),
                New SeriesPoint("III", 2500),
                New SeriesPoint("IV", 3300)
            })

            ' Add series to the Chart control.
            chartControl1.Series.AddRange(New Series() { series1, series2 })

            ' Create secondary X and Y axes and display them within the Chart control.
            Dim secondaryAxisX As New SecondaryAxisX()
            Dim secondaryAxisY As New SecondaryAxisY()

            CType(chartControl1.Diagram, XYDiagram).SecondaryAxesX.Add(secondaryAxisX)
            CType(chartControl1.Diagram, XYDiagram).SecondaryAxesY.Add(secondaryAxisY)

            ' Assign the 'series2' to secondary XY axes.
            CType(series2.View, LineSeriesView).AxisX = secondaryAxisX
            CType(series2.View, LineSeriesView).AxisY = secondaryAxisY

            ' Customize the appearance of secondary axes (optional).
            secondaryAxisX.Title.Text = "Secondary X-Axis"
            secondaryAxisX.Title.Visibility = DefaultBoolean.True
            secondaryAxisX.Title.TextColor = Color.Red
            secondaryAxisX.Label.TextColor = Color.Red
            secondaryAxisX.Color = Color.Red

            secondaryAxisY.Title.Text = "Secondary Y-Axis"
            secondaryAxisY.Title.Visibility = DefaultBoolean.True
            secondaryAxisY.Title.TextColor = Color.Blue
            secondaryAxisY.Label.TextColor = Color.Blue
            secondaryAxisY.Color = Color.Blue

            ' Hide the legend (optional).
            chartControl1.Legend.Visibility = DefaultBoolean.False

            ' Add the Chart control to the Form.
            Controls.Add(chartControl1)
        End Sub
    End Class
End Namespace

The following image shows the result: