asp.net - How to change Chart height programmatically

Change Chart height programmatically
The Chart class serves as the root class of the Chart control. The Chart class exposes all of the properties, methods, and events of the Chart Web server control. The Chart Series collection property stores Series objects which are used to store data that is to be displayed, along with attributes of that data. The Chart ChartAreas collection property stores ChartArea objects, which are primarily used to draw one or more charts using one set of axes.

The following asp.net c# web development tutorial code demonstrates how we can change the height of a Chart object. Here we used the Chart class Height property to change Chart height programmatically.

The Chart class Height property gets or sets the height of the entire chart image in pixels. This property value is a Unit that represents the height, in pixels, of the entire chart image. So finally, using the Chart class Height property the asp.net web developers can change the Chart instance height and set their preferred height in pixels.
ChangeChartHeight.aspx

<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html>

<script runat="server">
    protected void Button1_Click(object sender, System.EventArgs e)
    {
        Chart1.Height = 400;
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>How to set change Chart height programmatically in asp.net</title>
    <style type="text/css">
        h2
        {
            color:DarkBlue;
            font-style:italic;
            }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2>Chart example and tutorial: How to set change<br /> Chart height programmatically in asp.net</h2>
        <hr width="500" align="left" color="DarkBlue" />
        <br />
        <asp:Chart 
            ID="Chart1" 
            runat="server" 
            BorderlineDashStyle="Solid"
            BorderlineWidth="2"
            BorderlineColor="Pink"
            >
            <Titles>
                <asp:Title 
                    Text="Sample chart of salary" 
                    BackColor="Gold" 
                    ForeColor="Crimson"
                    BorderColor="Goldenrod"
                    BorderDashStyle="DashDotDot"
                    BorderWidth="1" 
                    >
                </asp:Title>
            </Titles>
            <Series>
                <asp:Series 
                    Name="Salary" 
                    YValueType="Int32" 
                    ChartType="Kagi" 
                    ChartArea="DefaultChartArea"
                    Color="Crimson"
                    >
                    <Points>
                        <asp:DataPoint AxisLabel="Kamal" YValues="27300" />
                        <asp:DataPoint AxisLabel="Sammi" YValues="21695" />
                        <asp:DataPoint AxisLabel="Arnob" YValues="24150" />
                        <asp:DataPoint AxisLabel="Sakib" YValues="9800" />
                        <asp:DataPoint AxisLabel="Faisal" YValues="27500" />
                    </Points>
                </asp:Series>
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="DefaultChartArea" BackColor="PapayaWhip" Area3DStyle-Enable3D="true">
                </asp:ChartArea>
            </ChartAreas>
        </asp:Chart>
        <br />
        <asp:Button 
            ID="Button1"
            runat="server"
            Text="Set Chart Height 400"
            Font-Bold="true"
            OnClick="Button1_Click"
            ForeColor="HotPink"
            Height="45"
            />
    </div>
    </form>
</body>
</html>
More asp.net chart example