4

I am trying to create a Chart with multiple columns, including some which are stacked and also have 2 Y axis.

When all columns are using the primary y axis they appear correctly side-by-side. One Y Axis

but when one (or more but not all) use the second y axis it appears to stack all columns on each axis rather than displaying them side-by-side. Two Y Axis

How can I get the columns to appear side-by-side but also have two y axis displayed. I've included my demo page code below.

aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<%@ Register TagPrefix="asp" Namespace="System.Web.UI.DataVisualization.Charting"
    Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>

<asp:chart id="Chart1" runat="server" height="400px" width="800px">
    <Titles>
        <asp:Title ShadowOffset="3" Name="Development capacity" />
    </Titles>
    <Legends>
        <asp:Legend Alignment="Center" Docking="Bottom" IsTextAutoFit="False" Name="Development backlog (in days)"
            LegendStyle="Row" />
        <asp:Legend Alignment="Center" Docking="Bottom" IsTextAutoFit="False" Name="Development days completed"
            LegendStyle="Row" />
        <asp:Legend Alignment="Center" Docking="Bottom" IsTextAutoFit="False" Name="Development capacity (in days)"
            LegendStyle="Row" />
        <asp:Legend Alignment="Center" Docking="Bottom" IsTextAutoFit="False" Name="New days scheduled (rolling av.)"
            LegendStyle="Row" />
    </Legends>
    <Series>
        <asp:Series Name="DevelopmentBacklog" />
        <asp:Series Name="DevDaysCompleted" />
        <asp:Series Name="DevCapacity" />
        <asp:Series Name="NewDaysScheduled" />
    </Series>
    <ChartAreas>
        <asp:ChartArea Name="chartArea" BorderWidth="0" />
    </ChartAreas>
</asp:chart>

Code-behind:

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.DataVisualization.Charting;
using System.Drawing;

public partial class Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string[] xAxis = { "Jan 2011", "Feb 2011", "Mar 2011", "Apr 2011", "May 2011", "Jun 2011", "Jul 2011", "Aug 2011" };
        double[] yAxisDevBacklog = { 220, 200, 120, 30, 25, 50, 30, 590 };
        double[] yAxisDevDaysCompleted = { 140, 145, 165, 105, 98, 140, 80, 100 };
        double[] yAxisDevCapacity = { 140, 155, 182, 122, 184, 210, 190, 205};
        double[] yAxisNewDaysScheduled = { 29, 40, 55, 48, 59, 75, 70, 182 };

        Chart1.Series["DevelopmentBacklog"].Points.DataBindXY(xAxis, yAxisDevBacklog);
        Chart1.Series["DevelopmentBacklog"].ChartType = SeriesChartType.StackedColumn;
        Chart1.Series["DevelopmentBacklog"].BorderWidth = 3;
        Chart1.Series["DevelopmentBacklog"].Color = Color.Blue;
        //// Uncomment this line to use the secondary y axis
        //// Chart1.Series["DevelopmentBacklog"].YAxisType = AxisType.Secondary;
        Chart1.Series["DevelopmentBacklog"]["StackedGroupName"] = "DevelopmentBacklog";

        Chart1.Series["NewDaysScheduled"].Points.DataBindXY(xAxis, yAxisNewDaysScheduled);
        Chart1.Series["NewDaysScheduled"].ChartType = SeriesChartType.StackedColumn;
        Chart1.Series["NewDaysScheduled"].BorderWidth = 3;
        Chart1.Series["NewDaysScheduled"].Color = Color.Green;
        Chart1.Series["NewDaysScheduled"]["StackedGroupName"] = "NewDaysScheduled";

        Chart1.Series["DevDaysCompleted"].Points.DataBindXY(xAxis, yAxisDevDaysCompleted);
        Chart1.Series["DevDaysCompleted"].ChartType = SeriesChartType.StackedColumn;
        Chart1.Series["DevDaysCompleted"].BorderWidth = 3;
        Chart1.Series["DevDaysCompleted"].Color = Color.LightGray;
        Chart1.Series["DevDaysCompleted"]["StackedGroupName"] = "DevDaysCompleted";

        Chart1.Series["DevCapacity"].Points.DataBindXY(xAxis, yAxisDevCapacity);
        Chart1.Series["DevCapacity"].ChartType = SeriesChartType.StackedColumn;
        Chart1.Series["DevCapacity"].BorderWidth = 3;
        Chart1.Series["DevCapacity"].Color = Color.OrangeRed;
        Chart1.Series["DevCapacity"]["StackedGroupName"] = "DevDaysCompleted";

        Chart1.ChartAreas["chartArea"].AxisX.MajorGrid.Enabled = false;
        Chart1.ChartAreas["chartArea"].AxisY2.MajorGrid.Enabled = false;
    }
}

1 Answer 1

2

I think you need to set Custom Properties of series. By default this property is set to Auto. You need to change this to True so it will always draw side by side.

Chart1.Series["DevelopmentBacklog"].CustomProperties = "DrawSideBySide=True";
Chart1.Series["DevDaysCompleted"].CustomProperties = "DrawSideBySide=True";
Chart1.Series["DevCapacity"].CustomProperties = "DrawSideBySide=True";
Chart1.Series["NewDaysScheduled"].CustomProperties = "DrawSideBySide=True";

MSDN - DrawSideBySide Property

1
  • Unfortunately that doesn't work, it has no effect. It looks like that property doesn't apply to StackedColumns, it only lists "Bar, Column, Range Column, Box Plot, Range Bar, Error Bar" on the MSDN page.
    – bmdixon
    Dec 3, 2014 at 8:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.