Hi,

I am using Infragistics Version 12.1.20121.2020.

I have a requirement where I need to display charts , and make it occupy the entire available space. I have seen the setting the UltraChart's Height and Width to 100% is not helping. It is still displaying the chart as an approximately 400 px * 300 px image. 

Can anyone tell me the best way to achieve this functionality?

I also tried another approach but failed to achieve the result:

By placing my UltraChart inside an Html Table and dynamically setting the chart's width and height to the Table column's width and height . However I am not able to call the right function to set width and height on client side. Can anyone tell me how to set the UltraChart width and height client side? Also, it would help if you give me a link for the client side data model of UltraChart.

Here is the code for the above:

<table id="tbl" runat="server" style="width:100%; height:100%;">
<tr style="width:100%; height:100%;">
<td style="width:100%; height:100%;">
<ig:UltraChart ID="chart" runat="server" BackColor="#EBEBEB" EmptyChartText="Data Not Available."
EnableCrossHair="False" ChartType="ColumnChart" Version="12.1"
Width="100%" Border-Color="White" Height="100%" Data-MaxValue = "100000000" Data-MinValue = "0" Data-UseMinMax = "true">
<Tooltips FontColor="Black" Font-Size="Small" BorderColor="White" BackColor="Gray" />
<TitleLeft VerticalAlign="Center" Orientation="VerticalLeftFacing" HorizontalAlign="Center">
</TitleLeft>
<ColumnChart ChartTextValueAlignment = "Positive" ColumnSpacing="2" SeriesSpacing="2"></ColumnChart>
<LineChart TreatDateTimeAsString="true" DrawStyle="Dot" EndStyle="ArrowAnchor" HighLightLines="false" MidPointAnchors="true" StartStyle="Round" Thickness="1"></LineChart>
<Legend Visible="true"></Legend>
<DeploymentScenario Scenario="FileSystem" ImageURL="/Images/Chart_#SEQNUM(100).png"
ImageType="Png" FilePath="/Images" RenderingType="Image"></DeploymentScenario>
</ig:UltraChart>
</td>
</tr>
</table>

<script type="text/javascript">
window.onload = updateChartWidthandHeight;
function updateChartWidthandHeight() {
var chart = document.getElementById('<%= chart.ClientID %>');
var width = document.getElementById('<%= tbl.ClientID %>').offsetWidth;
var height = document.getElementById('<%= tbl.ClientID %>').offsetHeight;
chart.runtimeStyle.height = height;
chart.runtimeStyle.width = width;
//The following also does not work
//chart.clientWidth = width;
//chart.clientHeight = height;
}
</script>