2

I need to plot 4 series data to MSChart using column or bar type. Can I plot those 4 series so that the data is overlapped instead of being stacked.

I just found there is a ChartGroup.Overlap property for office Excel.

How can I do it in MSChart? If not, what chart control can do this? Any info will be much appreciated.

Patrick Hofman
  • 153,850
  • 22
  • 249
  • 325
Owen Lee
  • 349
  • 1
  • 5
  • 19

2 Answers2

2

C# chart has properties for each series. The "column" chart type has property especially for that overlapping problem

chart_1.Series["col_name"].CustomProperties = "DrawSideBySide=False";
user10099473
  • 21
  • 3
  • 2
    Thank you for this code snippet, which might provide some limited, immediate help. A [proper explanation](https://meta.stackexchange.com/q/114762/349538) would greatly improve its long-term value by showing why this is a good solution to the problem and would make it more useful to future readers with other, similar questions. Please [edit] your answer to add some explanation, including the assumptions you’ve made. – Capricorn Jul 18 '18 at 12:30
1

Not sure if this is the ideal solution but if you create two ChartAreas in a chart and then just plot one on top of the other you can overlap series. This requires a lot of fiddling around with positions, sizes, axis etc to get them to line up so requires a bit of effort but produces the following

enter image description here

Chart _chart = new Chart();
TabPage2.Controls.Add(_chart);

_chart.Location = new Point(469, 37);
_chart.Name = "chart1";
_chart.Size = new Size(448, 260);


DataTable dt1 = new DataTable();
dt1.Columns.Add("XVals", typeof(string));
dt1.Columns.Add("YVals1", typeof(int));
dt1.Columns.Add("YVals2", typeof(int));

foreach (string c in "ABCDEF".ToCharArray()) {
    dt1.Rows.Add(c, Convert.ToInt32(Math.Ceiling(VBMath.Rnd() * 20)), Convert.ToInt32(Math.Ceiling(VBMath.Rnd() * 20)));
}

ChartArea firstArea = _chart.ChartAreas.Add("First Area");
Series seriesFirst = _chart.Series.Add("First Series");
seriesFirst.ChartType = SeriesChartType.Column;

ChartArea secondArea = _chart.ChartAreas.Add("Second Area");
secondArea.BackColor = Color.Transparent;
secondArea.AlignmentOrientation = AreaAlignmentOrientations.All;
secondArea.AlignmentStyle = AreaAlignmentStyles.All;
secondArea.AlignWithChartArea = firstArea.Name;
secondArea.AxisY.LabelStyle.Enabled = false;
secondArea.AxisX.LabelStyle.Enabled = false;

Series seriesSecond = _chart.Series.Add("Second Series");
seriesSecond.ChartType = SeriesChartType.Column;
seriesSecond.ChartArea = secondArea.Name;

_chart.DataSource = dt1;
seriesFirst.Points.DataBind(dt1.DefaultView, "XVals", "YVals1", null);
seriesSecond.Points.DataBind(dt1.DefaultView, "XVals", "YVals2", null);

//Aligning the Y axis of the two chart areas
//I am assuming here the x values for both series are similar and dont need to be altered
//If using bar chart then x axis would be modifed not the y axis
secondArea.AxisY = firstArea.AxisY;

// *** Set locational values here for your first chart area***
int heightAboveChartArea = 20;
int heightBelowChartArea = 20;
int axisLabelHeight = 40;
int widthLeftOfChartArea = 20;
int widthRightOfChartArea = 20;
int heightPerBar = 20;
int numberOfPoints = _chart.Series(0).Points.Count;

// *** The following code should not normally be modified ***
_chart.ChartAreas(0).Position.X = widthLeftOfChartArea / _chart.Width * 100;
_chart.ChartAreas(0).Position.Width = 100 - (widthRightOfChartArea / _chart.Width * 100) - _chart.ChartAreas(0).Position.X;
_chart.ChartAreas(0).Position.Y = (heightAboveChartArea / _chart.Height * 100);
_chart.ChartAreas(0).Position.Height = 100 - (heightBelowChartArea / _chart.Height * 100) - _chart.ChartAreas(0).Position.Y;
TylerDurden
  • 1,632
  • 1
  • 20
  • 30
  • But if the first series value is smaller than the second one, you won't see the first column value in the chart. Just like column C,D, F in your example chart. – Owen Lee Mar 28 '14 at 17:35
  • To start customising charts heavily [like excel] the solutions tend to get very hacky. Something like this vary the column charts widths so if one series is generally bigger than the other make it wider and put it at the back `_chart.Series(0)("PixelPointWidth") = 10; _chart.Series(1)("PixelPointWidth") = 15`. There is no in built overlap like excel that I am aware of, so any solution is going to be very hacky and will require manual placing of the columns, rearranging of the axis etc. in your chart. – TylerDurden Mar 28 '14 at 17:56