Synchronizing Two Charts Using Microsoft Chart Controls

Displaying two sets of data on a graph can be confusing to the viewer. Depending on the situation, it might be better to have two graphs linked together to help clarify. Here's an example of two graphs on one chart:

If we zoom in on the chart, we can see that both graphs adjust:

To accomplish this, first we have to set up the chart:

Chart chart = new Chart();
chart.ChartAreas.Add("ChartArea1");
chart.ChartAreas.Add("ChartArea2");
chart.Series.Add("counts");	//top graph points
chart.Series["counts"].Color = Color.Black;
chart.Series["counts"].ChartType = SeriesChartType.FastLine;
chart.Series.Add("onset");	//blue line that crosses through the top graph
chart.Series["onset"].Color = Color.Blue;
chart.Series["onset"].ChartType = SeriesChartType.FastLine;
chart.Series.Add("decay");  //red line that crosses through the top graph
chart.Series["decay"].Color = Color.Red;
chart.Series["decay"].ChartType = SeriesChartType.FastLine;
chart.Series.Add("plm");	//bottom graph points
chart.Series["plm"].Color = Color.Black;
chart.Series["plm"].ChartType = SeriesChartType.Column;

//set up zooming ability for both charts
chart.ChartAreas["ChartArea1"].CursorX.IsUserEnabled = true;
chart.ChartAreas["ChartArea1"].CursorX.IsUserSelectionEnabled = true;
chart.ChartAreas["ChartArea1"].AxisX.ScaleView.Zoomable = true;
chart.ChartAreas["ChartArea2"].CursorX.IsUserEnabled = true;
chart.ChartAreas["ChartArea2"].CursorX.IsUserSelectionEnabled = true;
chart.ChartAreas["ChartArea2"].AxisX.ScaleView.Zoomable = true;

//set correct series to the specific ChartArea
chart.Series["counts"].ChartArea = "ChartArea1";
chart.Series["onset"].ChartArea = "ChartArea1";
chart.Series["decay"].ChartArea = "ChartArea1";
chart.Series["plm"].ChartArea = "ChartArea2";

//make sure the scrollbar is positioned inside of the chart to look better
chart.ChartAreas["ChartArea2"].AxisX.ScrollBar.IsPositionedInside = false;

Then we have to set the InnerPlotPosition property:

chart.ChartAreas["ChartArea1"].InnerPlotPosition.Auto = true;
chart.ChartAreas["ChartArea2"].InnerPlotPosition.Auto = true;

Finally, we have to set the alignment properties so the second ChartArea aligns with the first.

chart.ChartAreas["ChartArea2"].AlignmentOrientation = AreaAlignmentOrientations.Vertical;
chart.ChartAreas["ChartArea2"].AlignmentStyle = AreaAlignmentStyles.All;
chart.ChartAreas["ChartArea2"].AlignWithChartArea = "ChartArea1";

This can work well for displaying stock market with the total value on the top chart and trading volume on the bottom chart.