Aligning and Synchronising X Axes in MS Chart Doesn't Work

Question

I have a chart control (from System.Windows.Forms.DataVisualization) with two chart areas. ChartArea2 is aligned to ChartArea1 as follows:

ChartArea2.AlignWithChartArea    = "ChartArea1";
ChartArea2.AlignmentOrientation  = AreaAlignmentOrientations.Vertical;
ChartArea2.AlignmentStyle        = AreaAlignmentStyles.All;

This works well except the X Axes are not aligned, despite being included in the AlignmentStyle. Instead, their minimum, maximum, interval, etc remain independent and are set according to the datapoints.

I need the X Axes to be identical, ie min, max, interval, etc. I can set these properties in code to force them to be identical. However, as soon as I zoom into ChartArea1, then the X Axes become misaligned again.

Is there a simple way for the X Axes to mirror each other regardless of the zoom level?

Answer 1

Well, they actually are aligned , ie sit at the same position regardless of their labels but they don't have the same range .

You don't see the alignment of the X-Axes when the sit vertically but look at the Y-Axes: They have different Font sizes but sit at the same horizontal position!

If you want to show the same range you need to set the range, as you wrote, by setting the Minimum & Maximum from the default NaN (which here means Automatic ) to some values.

And when you zoom one the other will zoom in parallel automatically as long as AreaAlignmentStyles.AxesView or AreaAlignmentStyles.All are selected.

So what you need is the combination of a non-automatic, explicit range (for the unzoomed state) and and a suitable AreaAlignmentStyle (for the zoomed state.)

Note that the AlignmentStyle needs to be made only for one of the two ChartAreas . But the Minimum/Maximum values need to be set for both :

ChartArea CA1 = chart1.ChartAreas[0];
ChartArea CA2 = chart1.ChartAreas.Add("ChartArea2");

// 2nd CA aligns to the 1st one:
CA2.AlignWithChartArea = "ChartArea1";
CA2.AlignmentOrientation = AreaAlignmentOrientations.Vertical;
CA2.AlignmentStyle = AreaAlignmentStyles.All;

// both have the same range:
CA1.AxisX.Maximum = 30;
CA2.AxisX.Maximum = 30;
CA1.AxisX.Minimum = 0;
CA2.AxisX.Minimum = 0;

// both are interactively zoomable:
CA1.AxisX.ScaleView.Zoomable = true;
CA1.AxisX.ScrollBar.Enabled = true;
CA1.CursorX.IsUserSelectionEnabled = true;
CA2.AxisX.ScaleView.Zoomable = true;
CA2.AxisX.ScrollBar.Enabled = true;
CA2.CursorX.IsUserSelectionEnabled = true;

In a zoomed state both ChartAreas still show the same range and have the same ScaleView.ViewMinimum / ScaleView.ViewMaximum :

Code to test the ScaleView values:

private void chart1_AxisViewChanged(object sender, ViewEventArgs e)
{
    AxisScaleView ASV1X = chart1.ChartAreas[0].AxisX.ScaleView;
    AxisScaleView ASV2X = chart1.ChartAreas[1].AxisX.ScaleView;

    label1.Text = "ScaleViews Min/Max: " + ASV1X.ViewMinimum + " - " + ASV1X.ViewMaximum +
                                 " | " +   ASV2X.ViewMinimum + " - " + ASV2X.ViewMaximum ;
    }

Note that to keep not only the value ranges aligned but also the visual display of the Axes you need to use the AlignmentStyle = AreaAlignmentStyles.All; , not just AxisView or else great differences in the values' formatting results or in the number of points to display can move the Y-Axis and make the X-Axes look misaligned!

Answer 2

Setting ChartArea.AxisX.IsMarginVisible = false; will solve the problem