Chart control two data set bars overlapping

Question

I am working on a ASP.NET project and I have a bar chart with two data sets alongside each other. How do I get them to over lap.

One item of data is a tank size, the other is the current level.

Answer 1

<asp:Series ChartArea="ChartArea1" Font="MS Mincho, 8pt, style=Bold" 
            Legend="Legend1" Name="Tank Size" XValueMember="Serial" 
            YValueMembers="DeviceSize" ChartType="StackedColumn">
        </asp:Series>
        <asp:Series Legend="Legend1" Name="Current Level" XValueMember="Serial" 
            YValueMembers="DeviceLevel" YValuesPerPoint="2" 
            Font="Mangal, 8pt, style=Bold" ChartType="Column">

I changed to the ChartType on one of the bars to column and one to stacked - this might be a dirty way but i works. Thats all I care about.

Answer 2

To build on the above StackedColumn solution. If you do not want the columns fully overlapping, but instead just want a partial overlap. You can generate a third series, two of the series will be of ChartType="Column" and one will be "StackedColumn".

The second series of ChartType Column needs at least one point, but set that point to a Y value of 0 so it does not show; this series will have the effect of pushing the other series off to the side.

    Chart chrt = new Chart();
    chrt.ChartAreas.Add("ChartArea");

    // The series in back
    Series chrtS = new Series();
    chrtS.Points.Add(new DataPoint(2, 3));
    chrtS.Points.Add(new DataPoint(3, 4));
    chrtS.Points.Add(new DataPoint(4, 5));
    chrtS.ChartType = SeriesChartType.Column;
    chrtS.Color = System.Drawing.Color.Blue;
    chrtS["PointWidth"] = ".5";
    chrt.Series.Add(chrtS);

    // The series invisibly pushing the one above over
    Series chrtS1 = new Series();
    chrtS1.Points.Add(new DataPoint(2, 0));
    chrtS1.ChartType = SeriesChartType.Column;
    chrtS1.Color = System.Drawing.Color.Green;
    chrtS1["PointWidth"] = ".5";
    chrt.Series.Add(chrtS1);

    // The series stacked on top
    Series chrtS2 = new Series();
    chrtS2.Points.Add(new DataPoint(2, 4));
    chrtS2.Points.Add(new DataPoint(3, 3));
    chrtS2.Points.Add(new DataPoint(4, 2));
    chrtS2.ChartType = SeriesChartType.StackedColumn;
    chrtS2.Color = System.Drawing.Color.Red;
    chrtS2["PointWidth"] = ".25";
    chrt.Series.Add(chrtS2);

I have changed the values for the picture since posting the code, however it will give you an end result something like this:

---

If you need more detailed control over labels, or the distance the bars are slid over each other then you can use Chart Areas to accomplish that.

    Chart chrt = new Chart();
    chrt.ChartAreas.Add("ChartAreaRed");
    chrt.ChartAreas["ChartAreaRed"].BackColor = System.Drawing.Color.Transparent;
    chrt.ChartAreas["ChartAreaRed"].Position.Height = 100;
    chrt.ChartAreas["ChartAreaRed"].Position.Width = 100;
    chrt.ChartAreas["ChartAreaRed"].InnerPlotPosition.Height = 90;
    chrt.ChartAreas["ChartAreaRed"].InnerPlotPosition.Width = 80;
    chrt.ChartAreas["ChartAreaRed"].InnerPlotPosition.X = 10;
    chrt.ChartAreas["ChartAreaRed"].AxisY.Maximum = 6;
    chrt.ChartAreas["ChartAreaRed"].AxisX.Maximum = 5;
    chrt.ChartAreas["ChartAreaRed"].AxisX.Interval = 1;
    chrt.ChartAreas["ChartAreaRed"].Position.X = 0;
    chrt.ChartAreas.Add("ChartAreaGreen");
    chrt.ChartAreas["ChartAreaGreen"].BackColor = System.Drawing.Color.Transparent;
    chrt.ChartAreas["ChartAreaGreen"].Position.Height = 100;
    chrt.ChartAreas["ChartAreaGreen"].Position.Width = 100;
    chrt.ChartAreas["ChartAreaGreen"].InnerPlotPosition.Height = 90;
    chrt.ChartAreas["ChartAreaGreen"].InnerPlotPosition.Width = 80;
    chrt.ChartAreas["ChartAreaGreen"].InnerPlotPosition.X = 10;
    chrt.ChartAreas["ChartAreaGreen"].AxisY.Maximum = 6;
    chrt.ChartAreas["ChartAreaGreen"].AxisX.Maximum = 5;
    chrt.ChartAreas["ChartAreaGreen"].AxisX.Interval = 1;
    chrt.ChartAreas["ChartAreaGreen"].Position.X = 0;
    chrt.ChartAreas["ChartAreaGreen"].Axes[0].Enabled = AxisEnabled.False;
    chrt.ChartAreas["ChartAreaGreen"].Axes[1].Enabled = AxisEnabled.False;
    chrt.ChartAreas.Add("ChartAreaBlue");
    chrt.ChartAreas["ChartAreaBlue"].BackColor = System.Drawing.Color.Transparent;
    chrt.ChartAreas["ChartAreaBlue"].Position.Height = 100;
    chrt.ChartAreas["ChartAreaBlue"].Position.Width = 100;
    chrt.ChartAreas["ChartAreaBlue"].InnerPlotPosition.Height = 90;
    chrt.ChartAreas["ChartAreaBlue"].InnerPlotPosition.Width = 80;
    chrt.ChartAreas["ChartAreaBlue"].InnerPlotPosition.X = 15;
    chrt.ChartAreas["ChartAreaBlue"].AxisY.Maximum = 6;
    chrt.ChartAreas["ChartAreaBlue"].AxisX.Maximum = 5;
    chrt.ChartAreas["ChartAreaBlue"].AxisX.Interval = 1;
    chrt.ChartAreas["ChartAreaBlue"].Axes[0].Enabled = AxisEnabled.False;
    chrt.ChartAreas["ChartAreaBlue"].Axes[1].Enabled = AxisEnabled.False;

    chrt.ChartAreas["ChartAreaBlue"].AxisX.MajorGrid.Enabled = false;

    Series chrtS_Red = new Series();
    chrtS_Red.Points.Add(new DataPoint(2, 1));
    chrtS_Red.Points.Add(new DataPoint(3, 0));
    chrtS_Red.Points.Add(new DataPoint(4, 2));
    chrtS_Red.ChartType = SeriesChartType.Column;
    chrtS_Red.Color = System.Drawing.ColorTranslator.FromHtml("#aa220d"); // massini red
    chrtS_Red.IsValueShownAsLabel = true;
    chrtS_Red.EmptyPointStyle.IsValueShownAsLabel = false;
    chrtS_Red["PointWidth"] = ".5";
    chrtS_Red["LabelStyle"] = "TopLeft"; // Auto, Top, Bottom, Right, Left, TopLeft, TopRight, BottomLeft, BottomRight, Center
    chrtS_Red.ChartArea = "ChartAreaRed";
    chrt.Series.Add(chrtS_Red);

    Series chrtS_Green = new Series();
    chrtS_Green.Points.Add(new DataPoint(2, 0));
    chrtS_Green.Points[0].IsEmpty = true;
    chrtS_Green.Points.Add(new DataPoint(3, 5));
    chrtS_Green.Points.Add(new DataPoint(4, 0));
    chrtS_Green.Points[2].IsEmpty = true;
    chrtS_Green.ChartType = SeriesChartType.Column;
    chrtS_Green.Color = System.Drawing.ColorTranslator.FromHtml("#94952d"); // massini green
    chrtS_Green.IsValueShownAsLabel = true;
    chrtS_Green.EmptyPointStyle.IsValueShownAsLabel = false;
    chrtS_Green["LabelStyle"] = "TopLeft"; // Auto, Top, Bottom, Right, Left, TopLeft, TopRight, BottomLeft, BottomRight, Center
    chrtS_Green["PointWidth"] = ".5";
    chrtS_Green.ChartArea = "ChartAreaGreen";
    chrt.Series.Add(chrtS_Green);

    Series chrtS_Blue = new Series();
    chrtS_Blue.Points.Add(new DataPoint(2, 3));
    chrtS_Blue.Points.Add(new DataPoint(3, 4));
    chrtS_Blue.Points.Add(new DataPoint(4, 5));
    chrtS_Blue.ChartType = SeriesChartType.Column;
    chrtS_Blue.Color = System.Drawing.ColorTranslator.FromHtml("#3e8bc3"); // massini blue
    chrtS_Blue.IsValueShownAsLabel = true;
    chrtS_Blue["LabelStyle"] = "TopRight"; // Auto, Top, Bottom, Right, Left, TopLeft, TopRight, BottomLeft, BottomRight, Center
    chrtS_Blue["PointWidth"] = ".5";
    chrtS_Blue.ChartArea = "ChartAreaBlue";
    chrt.Series.Add(chrtS_Blue);

This will produce something that looks like this:

This method is definitely more complex and more difficult to understand. But once you do understand it it allows much greater control. The key is setting all the Chart Areas width and heights to the same values, then doing the same with the InnerPlotPosition attributes.

The InnerPlotPosition allows you to control the area inside the plot area that is dedicated to plotting the values rather than having the grid lines and values included in the width and height calculations.

You have to set a value for both the width and the height for InnerPlotPosition or else a default of 0 will be used and you will see nothing.

Also, if you intend to have grid lines or X and Y axis values then you will need the width and height values for InnerPlotPosition to be less than 100 to allow for room inside the Chart Area for those items, or else they will be hidden.

Finally, when using layers, make sure you set all the backgrounds to transparent or you will only see the last layer added. If you want a background then apply it to the first layer.

Answer 3

You can use PointWidth Custom attribute

chartObj.Series[0]["PointWidth"] = "1.3";