User-2057865890 posted
Hi Madhan,
Based on your description, it is a Stacked Column Chart. You could refer to the following code snippets.
Html Markup
<form id="Form1" method="post" runat="server">
<p class="dscr">
This sample demonstrates Stacked Area, Stacked Bar, Stacked Column, 100% Stacked Area,
100% Stacked Bar, and 100% Stacked Column chart types.
</p>
<table class="sampleTable">
<tr>
<td width="412" class="tdchart">
<asp:Chart ID="Chart1" runat="server" Height="296px" Width="412px" BackColor="#D3DFF0" Palette="BrightPastel" BorderlineDashStyle="Solid" BackGradientStyle="TopBottom" BorderWidth="2" BorderColor="26, 59, 105">
<Legends>
<asp:Legend TitleFont="Microsoft Sans Serif, 8pt, style=Bold" BackColor="Transparent" Font="Trebuchet MS, 8.25pt, style=Bold" IsTextAutoFit="False" Enabled="False" Name="Default"></asp:Legend>
</Legends>
<BorderSkin SkinStyle="Emboss"></BorderSkin>
<Series>
<asp:Series Name="Series1" ChartType="StackedArea100" BorderColor="180, 26, 59, 105" Color="220, 65, 140, 240"></asp:Series>
<asp:Series Name="Series2" ChartType="StackedArea100" BorderColor="180, 26, 59, 105" Color="220, 252, 180, 65"></asp:Series>
<asp:Series Name="Series3" ChartType="StackedArea100" BorderColor="180, 26, 59, 105" Color="220, 224, 64, 10"></asp:Series>
<asp:Series Name="Series4" ChartType="StackedArea100" BorderColor="180, 26, 59, 105" Color="220, 5, 100, 146"></asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" BorderDashStyle="Solid" BackSecondaryColor="Transparent" BackColor="64, 165, 191, 228" ShadowColor="Transparent" BackGradientStyle="TopBottom">
<Area3DStyle Rotation="10" Inclination="15" WallWidth="0" />
<Position Y="3" Height="92" Width="92" X="2"></Position>
<AxisY LineColor="64, 64, 64, 64" LabelAutoFitMaxFontSize="8">
<LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
<MajorGrid LineColor="64, 64, 64, 64" />
</AxisY>
<AxisX LineColor="64, 64, 64, 64" LabelAutoFitMaxFontSize="8">
<LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
<MajorGrid LineColor="64, 64, 64, 64" />
</AxisX>
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
</td>
<td valign="top">
<table class="controls" cellpadding="4">
<tr>
<td class="label">Chart Type:</td>
<td>
<asp:DropDownList ID="ChartTypeList" runat="server" AutoPostBack="True" CssClass="spaceright">
<asp:ListItem Value="StackedBar" Selected="True">StackedBar</asp:ListItem>
<asp:ListItem Value="StackedColumn">StackedColumn</asp:ListItem>
<asp:ListItem Value="StackedArea">StackedArea</asp:ListItem>
</asp:DropDownList></td>
</tr>
<tr>
<td class="label">100% Stacked:</td>
<td>
<asp:CheckBox ID="HundredPercentStacked" runat="server" AutoPostBack="True" Text=""></asp:CheckBox></td>
</tr>
<tr>
<td class="label">Show Point Labels:</td>
<td>
<asp:CheckBox ID="ShowLabels" runat="server" AutoPostBack="True" Text=""></asp:CheckBox></td>
</tr>
<tr>
<td class="label">Show X Axis Margins:</td>
<td>
<asp:CheckBox ID="ShowMargins" runat="server" Text="" AutoPostBack="True" Checked="True"></asp:CheckBox></td>
</tr>
<tr>
<td class="label">Show as 3D:</td>
<td>
<asp:CheckBox ID="checkBoxShow3D" TabIndex="6" runat="server" AutoPostBack="True" Text=""></asp:CheckBox></td>
</tr>
<tr>
<td class="label">Grouped:</td>
<td>
<asp:CheckBox ID="checkBoxGrouped" TabIndex="6" runat="server" AutoPostBack="True" Text=""></asp:CheckBox></td>
</tr>
</table>
</td>
</tr>
</table>
<p class="dscr">
<!-- SECOND DESCRIPTION HERE-->
When using the Stacked bar or
Stacked column types, you can group different series into separate groups by
setting the StackedGroupName custom attribute.
</p>
</form>
Code behind
protected void Page_Load(object sender, EventArgs e)
{
// Populate series data
Random random = new Random();
for (int pointIndex = 0; pointIndex < 10; pointIndex++)
{
Chart1.Series["Series1"].Points.AddY(Math.Round((double)random.Next(45, 95), 0));
Chart1.Series["Series2"].Points.AddY(Math.Round((double)random.Next(5, 75), 0));
Chart1.Series["Series3"].Points.AddY(Math.Round((double)random.Next(5, 95), 0));
Chart1.Series["Series4"].Points.AddY(Math.Round((double)random.Next(35, 95), 0));
}
// Set chart type
string chartTypeName = ChartTypeList.SelectedItem.Text;
if (HundredPercentStacked.Checked)
{
chartTypeName = chartTypeName + "100";
}
// Grouping cannot be done using stacked area charts
if (chartTypeName == "StackedArea" || chartTypeName == "StackedArea100")
this.checkBoxGrouped.Enabled = false;
else
this.checkBoxGrouped.Enabled = true;
Chart1.Series["Series1"].ChartType = (SeriesChartType)Enum.Parse(typeof(SeriesChartType), chartTypeName, true);
Chart1.Series["Series2"].ChartType = (SeriesChartType)Enum.Parse(typeof(SeriesChartType), chartTypeName, true);
Chart1.Series["Series3"].ChartType = (SeriesChartType)Enum.Parse(typeof(SeriesChartType), chartTypeName, true);
Chart1.Series["Series4"].ChartType = (SeriesChartType)Enum.Parse(typeof(SeriesChartType), chartTypeName, true);
// Show point labels
if (ShowLabels.Checked)
{
Chart1.Series["Series1"].IsValueShownAsLabel = true;
Chart1.Series["Series2"].IsValueShownAsLabel = true;
Chart1.Series["Series3"].IsValueShownAsLabel = true;
Chart1.Series["Series4"].IsValueShownAsLabel = true;
}
// Set X axis margin for the area chart
Chart1.ChartAreas["ChartArea1"].AxisX.IsMarginVisible = ShowMargins.Checked;
// Show as 2D or 3D
if (checkBoxShow3D.Checked)
{
Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;
}
else
{
Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = false;
}
if (checkBoxGrouped.Checked)
{
Chart1.Series["Series1"]["StackedGroupName"] = "Group1";
Chart1.Series["Series2"]["StackedGroupName"] = "Group1";
Chart1.Series["Series3"]["StackedGroupName"] = "Group2";
Chart1.Series["Series4"]["StackedGroupName"] = "Group2";
Chart1.ResetAutoValues();
}
else
{
foreach (Series series in Chart1.Series)
{
series["StackedGroupName"] = "";
}
Chart1.ResetAutoValues();
}
}
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
}
#endregion
reference:
Samples Environments for Microsoft Chart Controls
Best Regards,
Chris
