How to make asp.net chart control responsive using bootstrap
I am using bootstrap in asp.net c#. Every thing is working fine (responsive) except the asp.net chart control. Can any one please suggest how can I make it block like btn-block. Please check the code and image. Thanks
<body class="container-fluid">
<form id="form1" runat="server">
<div >
<asp:Button ID="Button1" runat="server" Text="Button" class="btn btn-info col-lg-12"/>
<asp:Table ID="Tbl_chart" runat="server" CssClass="table table-bordered table-condensed table-responsive">
<asp:TableRow>
<asp:TableCell>
<asp:Chart ID="Chart2" runat="server" AlternateText="Column chart of daily walking time" Height="432" Palette="Fire" class="col-lg-12">
<Series>
<asp:Series Name="Series1" XValueMember="date" YValueMembers="TimePerDay" ChartArea="ChartArea2" ChartType="column" YValuesPerPoint="6" IsValueShownAsLabel="true" LabelFormat="{0:N0}">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea2">
<AxisY Interval="50">
<MajorGrid Enabled="true" LineColor="lightgray" />
</AxisY>
<AxisX IsLabelAutoFit="false" TitleForeColor="black" Interval="1">
<LabelStyle Format="dddd, dd-MM-yy" Angle="-90" IsEndLabelVisible="false" />
<MajorGrid Enabled="false" />
</AxisX>
</asp:ChartArea>
</ChartAreas>
<Titles>
<asp:Title Docking="Top" Font="Arial, 12pt" Name="Title1" Text="Daily walking time in minutes">
</asp:Title>
</Titles>
</asp:Chart>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</div>
</form>
</body>
Answer
It works! thank you, All you have to do is add that class to your chart like this:
<asp:Chart ID="Chart1" CanResize="true" CssClass="table table-bordered table-condensed table-responsive" runat="server" Height="410px" Width="1000px">
<Series>
<asp:Series Name="Series1"></asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1"></asp:ChartArea>
</ChartAreas>
</asp:Chart>