asp.net - How to change a Chart width programmatically

Chart width
The following asp.net c# example code demonstrate us how can we set or change a Chart control's (Chart Image) width programmatically at run time in an asp.net application. Chart is an asp.net web server control. Chart control allow us to create simple, intuitive and visually compelling charts for complex statistical or financial analysis.

Chart control render a chart as an image. We can set the chart width programmatically by its 'Width' property. Chart control's Width property get or set the width of the entire chart image in pixels. Chart width property value type is System.Web.UI.WebControls.Unit. This Unit value represents the width, in pixels, of the entire chart image.

So we can simply pass an integer value to Chart With property such as Width property value '300' render a chart image which width is 300 pixels.
ChangeChartWidth.aspx

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

<!DOCTYPE html>

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>How to set change Chart width 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 width programmatically in asp.net</h2>
        <hr width="500" align="left" color="DarkBlue" />
        <br />
        <asp:Chart 
            ID="Chart1" 
            runat="server" 
            BorderlineDashStyle="Solid"
            BorderlineWidth="2"
            BorderlineColor="DodgerBlue"
            >
            <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="Bar" 
                    ChartArea="DefaultChartArea"
                    Color="CornflowerBlue"
                    >
                    <Points>
                        <asp:DataPoint AxisLabel="Sagor" YValues="27300" />
                        <asp:DataPoint AxisLabel="Sammi" YValues="24695" />
                        <asp:DataPoint AxisLabel="Saikot" YValues="14150" />
                        <asp:DataPoint AxisLabel="Sakib" YValues="9700" />
                        <asp:DataPoint AxisLabel="Faisal" YValues="27500" />
                    </Points>
                </asp:Series>
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="DefaultChartArea" BackColor="AliceBlue" Area3DStyle-Enable3D="true">
                </asp:ChartArea>
            </ChartAreas>
        </asp:Chart>
        <br />
        <asp:Button 
            ID="Button1"
            runat="server"
            Text="Set Chart Width 500"
            Font-Bold="true"
            OnClick="Button1_Click"
            ForeColor="DarkBlue"
            Height="45"
            />
    </div>
    </form>
</body>
</html>
More asp.net chart example