Aligning chart vertical axes between 2 chart objects

6
votes

In my application I have 2 graphs, one above the other on the UI (as in closer to the top of the monitor). Both graphs' horizontal axes refer to the same range of time. Their vertical axes can be very different though, so I want to keep them as to graphs. They offer complimentary information, and as such, I would like to keep their horizontal axes in sync, even if their vertical axis labels for them to shift.

In both cases, the chart controls that contain these have the same width, just the data inside is shifted.

I currently have this:

10000|
 8000|
 6000|
 4000|
 2000|
    0 ---------------------------------
      0                              10

Long Label 3|
Long Label 2|
Long Label 1|
Long Label 0 -----------------------
             0                    10

And I want this:

       10000|
        8000|
        6000|
        4000|
        2000|
           0 ---------------------------------
             0                              10

Long Label 3|
Long Label 2|
Long Label 1|
Long Label 0 ---------------------------------
             0                              10

They were originally separate Chart MSChart controls. I tried putting them in the same chart control as different chart areas, but it did not fix the problem.

How could I achieve this? I would preferably like them on separate chart controls, but I could settle for separate Chart areas if I have to.

3
c#winformsuser-interfacemschart

3 Answers

3
votes

I did eventually find an answer. I would still like it in different chart controls, however, if they are different chart areas in the same chart control, you can use the ChartArea.AlignWithChartArea property.

//Say We have 2 Chart areas, one named "Main Info" and the other "Supplemental"
chart1.ChartAreas["Supplemental"].AlignWithChartArea = "Main Info";
chart1.ChartAreas["Supplemental"].AlignmentOrientation = AreaAlignmentOrientations.Vertical;
chart1.ChartAreas["Supplemental"].AlignmentStyle = AreaAlignmentStyles.All;

And that will line them up the way I wanted.

2
votes

It`s late answer but write for who want this answer.
My answer is using other chart.

double x_position = chart1.ChartAreas[0].AxisX.ScaleView.Position;
double x_size = chart1.ChartAreas[0].AxisX.ScaleView.Size;
chart2.ChartAreas[0].AxisX.ScaleView.Zoom(x_position, x_position + x_size);

For realtime synchro, use this code in chart event AxisViewChanged.

2
votes

For realtime synchro multiple CharArea as Temp said:

private void chart1_AxisViewChanged(object sender, ViewEventArgs e)
{
    foreach (var charArea in chart1.ChartAreas)
    {
        if (charArea != e.ChartArea)
        {
            double x_position = e.ChartArea.AxisX.ScaleView.Position;
            double x_size = e.ChartArea.AxisX.ScaleView.Size;
            charArea.AxisX.ScaleView.Zoom(x_position, x_position + x_size);    
        }                
    }            
}