Let column charts overlap in Chart Control

Question

I have following issue: I need to show multiple columns in a chart control (about seven series in one chart area). Now when I have a chart of type "Column" all seven columns get shown side by side. What I want to do is to overlap them. Is this possible?

The following two solutions didn't help me:

Plotting overlapping column or bar chart

Chart control two data set bars overlapping

Thank you.

score 5 · Accepted Answer · edited May 23 '17 at 11:54

There is no built-in way to do that.

One workaround is to turn on 3-d, but that will completely change the look of the chart..
The other is to owner-draw the chart.

This is not exactly easy for column and bar types, since the sizeof the columns is not exposed.

Also note that overlapping columns do get somewhat harder to read, esp. when you also have Labels.

Here is an example of a owner-drawing column chart. It has several simplifications:

All Series have the same number of points and are aligned, all y-values are positive and there are no other adornments. They may all be overcome, but probably with some extra efforts..

private void chart1_PostPaint(object sender, ChartPaintEventArgs e)
{
    if (!checkBox2.Checked) return;

    int sMax = chart1.Series.Count;
    ChartArea ca = chart1.ChartAreas[0];
    Axis ax = ca.AxisX;
    Axis ay = ca.AxisY;
    float py0 = (float)ay.ValueToPixelPosition(ay.Minimum);
    Rectangle ipr = Rectangle.Round(InnerPlotPositionClientRectangle(chart1, ca));
    int pMax = chart1.Series[0].Points.Count;
    float shift = (overlap * sMax) / 2f;
    float deltaX = 1f * ipr.Width / (pMax+1);
    float colWidth = 1f * deltaX / sMax;

    for (int j = 0; j < chart1.Series.Count; j++)
        for (int i = 0; i < chart1.Series[j].Points.Count; i++)
        {
            DataPoint dp = chart1.Series[j].Points[i];
            float px = (float)ax.ValueToPixelPosition(dp.XValue);
            float py = (float)ay.ValueToPixelPosition(dp.YValues[0]);
            using (SolidBrush brush = new SolidBrush(chart1.Series[j].Color))
                e.ChartGraphics.Graphics.FillRectangle(brush, 
                    px + j * colWidth - deltaX / 2 - overlap * j + shift,   py,
                    colWidth, py0 -  py );
        }
}

It makes use of a function InnerPlotPositionClientRectangle which you can find here

Here is the result:

Note that to access the Series Colors you need to apply them to the Chart:

  chart1.ApplyPaletteColors();

The Column width is set like this:

private void numericUpDown1_ValueChanged(object sender, EventArgs e)
{
    for (int j = 0; j < chart1.Series.Count; j++)
        chart1.Series[j]["PointWidth"] = numericUpDown1.Value.ToString();
}

At "0" the columns disappear.

Thanks but the charts are only getting turned around or not? I would need something that looks like a StackedColumn Chart — Canox, Nov 25 '16 at 14:23
They are not turnes but shifted so that they overlap. Why ask for __overlapping__ columns when you want to __stack__ them?? And what do you mean by _'something that looks like a StackedColumn Chart'_ ??? Do you mean a StackedColumn chart?. So there you have it! Now you just ned to [follow the rules](http://stackoverflow.com/questions/40278299/stackedcolumn-chart-shows-weird-column-width/40279546?s=1|4.8085#40279546) for crerating one!! — TaW, Nov 25 '16 at 15:24
The question may hwelp juture readers who want to owner-draw Columns. I suggest you let the question stand as it is and 1) try to use a StackedColumn chart and when you run into problem ask a new, better question with all the details, best including a screenshot! — TaW, Nov 25 '16 at 15:35
Actzally is may be rewritten to stack the columns by 1) setting a maximum and 2) caluclating the stacked rectangles instead of shifted ones. But that would prevent any correct interactions with the columns as the painted ones would be at quite diffent height than the real ones, so e.g. tooltip or hittests would run into problems.. — TaW, Nov 25 '16 at 15:38

score 2 · Answer 2 · answered May 15 '18 at 03:27

Column Series has a CustomProperties named DrawSideBySide, set it to False will result columns drawing overlap.

series1.CustomProperties = "DrawSideBySide=False";

It can also be set in IDE, by going to Properties window, Series Collection Editor, then find CustomProperties, DrawSideBySide.

Let column charts overlap in Chart Control

2 Answers2

Linked