Change chart height and width property in javascript

Question

I have this button that when is clicked it's supposed to downsize a chart but it's not working. I don't want to change the style height and width attribute since this makes the chart look stretched. That's why I'm trying to change the property that's in the chart element.

 <script type="text/javascript">
        function downSize() {
            document.getElementById("chart1").Height = "350px";
            document.getElementById("chart1").Width = "600px";  
        }
    </script>

<!--Button-->
<asp:LinkButtonrunat="server" Text="DownSize" ID="DownSize" class="btn btn info" onClientClick="downSize()"></asp:LinkButton>

  <!--Graph-->
  <asp:Chart ID="chart1" runat="server"   EnableViewState="True" Height = "650px" Width = "1200px">
            <Legends>
                <asp:Legend Name="Legend">
                </asp:Legend>
            </Legends>
            <ChartAreas>
                <asp:ChartArea Name="DefaultChartArea" BorderColor="Gainsboro">
                    <AxisY >
                        <MajorGrid LineColor="LightSteelBlue" />
                        <MajorTickMark LineColor="Transparent" />
                    </AxisY>
                    <AxisX>
                        <MajorGrid LineColor="LightSteelBlue" />
                        <MajorTickMark LineColor="Transparent" />
                    </AxisX>
                </asp:ChartArea>
            </ChartAreas>
            <BorderSkin BackColor="Transparent" BorderColor="Transparent" BorderDashStyle="DashDot" SkinStyle="Emboss" />
</asp:Chart>

When the button is clicked it seems the chart is reloaded but its the same size as before. I also added a document.write("Hello") to make sure the button is activating the function and it works so it seems is something wrong with the graph or the script.

Why is the code not working?

Answer 1

The Hieght and Width are asp control properties.

Try to change the css attributes of the chart:

 function downSize() {
            document.getElementById("chart1").style.height = "350px";
            document.getElementById("chart1").style.width = "600px";  
        }