How to: Add Secondary Axes to a Chart

• Jan 15, 2024
• 3 minutes to read

This example demonstrates how secondary axes can be added to a chart at runtime.

C#

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

private void Form1_Load(object sender, EventArgs e) {
    // Create a new chart.
    ChartControl chartControl1 = new ChartControl();

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

    // Add points to them, with their arguments different.
    series1.Points.Add(new SeriesPoint("A", 10));
    series1.Points.Add(new SeriesPoint("B", 12));
    series1.Points.Add(new SeriesPoint("C", 17));
    series1.Points.Add(new SeriesPoint("D", 14));
    series2.Points.Add(new SeriesPoint("I", 1500));
    series2.Points.Add(new SeriesPoint("II", 1800));
    series2.Points.Add(new SeriesPoint("III", 2500));
    series2.Points.Add(new SeriesPoint("IV", 3300));

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

    // Hide the legend (optional).
    chartControl1.Legend.Visible = false;

    // Create two secondary axes, and add them to the chart's Diagram.
    SecondaryAxisX myAxisX = new SecondaryAxisX("my X-Axis");
    SecondaryAxisY myAxisY = new SecondaryAxisY("my Y-Axis");

    ((XYDiagram)chartControl1.Diagram).SecondaryAxesX.Add(myAxisX);
    ((XYDiagram)chartControl1.Diagram).SecondaryAxesY.Add(myAxisY);

    // Assign the series2 to the created axes.
    ((LineSeriesView)series2.View).AxisX = myAxisX;
    ((LineSeriesView)series2.View).AxisY = myAxisY;

    // Customize the appearance of the secondary axes (optional).
    myAxisX.Title.Text = "A Secondary X-Axis";
    myAxisX.Title.Visible = true;
    myAxisX.Title.TextColor = Color.Red;
    myAxisX.Label.TextColor = Color.Red;
    myAxisX.Color = Color.Red;

    myAxisY.Title.Text = "A Secondary Y-Axis";
    myAxisY.Title.Visible = true;
    myAxisY.Title.TextColor = Color.Blue;
    myAxisY.Label.TextColor = Color.Blue;
    myAxisY.Color = Color.Blue;

    // Add the chart to the form.
    chartControl1.Dock = DockStyle.Fill;
    this.Controls.Add(chartControl1);
}

VB.NET

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

Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs) _ 
Handles MyBase.Load
    ' Create a new chart.
    Dim chartControl1 As New ChartControl()

    ' Create two series.
    Dim series1 As New Series("Series 1", ViewType.Bar)
    Dim series2 As New Series("Series 2", ViewType.Line)

    ' Add points to them, with their arguments different.
    series1.Points.Add(New SeriesPoint("A", 10))
    series1.Points.Add(New SeriesPoint("B", 12))
    series1.Points.Add(New SeriesPoint("C", 17))
    series1.Points.Add(New SeriesPoint("D", 14))
    series2.Points.Add(New SeriesPoint("I", 1500))
    series2.Points.Add(New SeriesPoint("II", 1800))
    series2.Points.Add(New SeriesPoint("III", 2500))
    series2.Points.Add(New SeriesPoint("IV", 3300))

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

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

    ' Create two secondary axes, and add them to the chart's Diagram.
    Dim myAxisX As New SecondaryAxisX("my X-Axis")
    Dim myAxisY As New SecondaryAxisY("my Y-Axis")

    CType(chartControl1.Diagram, XYDiagram).SecondaryAxesX.Add(myAxisX)
    CType(chartControl1.Diagram, XYDiagram).SecondaryAxesY.Add(myAxisY)

    ' Assign the series2 to the created axes.
    CType(series2.View, LineSeriesView).AxisX = myAxisX
    CType(series2.View, LineSeriesView).AxisY = myAxisY

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

    myAxisY.Title.Text = "A Secondary Y-Axis"
    myAxisY.Title.Visible = True
    myAxisY.Title.TextColor = Color.Blue
    myAxisY.Label.TextColor = Color.Blue
    myAxisY.Color = Color.Blue

    ' Add the chart to the form.
    chartControl1.Dock = DockStyle.Fill
    Me.Controls.Add(chartControl1)
End Sub

The result is shown in the following image.