This is a migrated thread and some comments may be shown as answers.

Defining Max height/width of Chart

1 Answer 335 Views

Chart (HTML5)

This is a migrated thread and some comments may be shown as answers.

Kurt Kluth asked on 29 Oct 2014, 08:05 PM

htmlcharts.png

We currently have a "window" that we would like to display our charts in and can't seem to get the chart to fit nicely in it (as depicted in image).

Window is 400 px x 400 px; there seems to be additional padding around the chart? Would like to remove the scrollbars. Any suggestions?

<div style="width: 98%; margin: 0 auto; overflow: auto; border: 1px solid green;">

<div id="slide_00" class="slide" style="border: 1px solid red; height: 250px; width: 350px;">

<telerik:RadHtmlChart runat="server" Width="350px" Height="225px" ID="RadHtmlChart1"

DataSourceID="SqlDataSource1">

<PlotArea>

<Series>

<telerik:ColumnSeries DataFieldY="NumOfMembers">

<TooltipsAppearance Color="White" />

</telerik:ColumnSeries>

</Series>

<XAxis DataLabelsField="MemberType">

<TitleAppearance Text="Member Types">

<TextStyle Margin="5" />

</TitleAppearance>

<MajorGridLines Visible="false" />

<MinorGridLines Visible="false" />

</XAxis>

<YAxis>

<TitleAppearance Text="Active Members">

<TextStyle Margin="5" />

</TitleAppearance>

<MinorGridLines Visible="false" />

</YAxis>

</PlotArea>

<ChartTitle Text="# of Active ASI Credit Unions">

</ChartTitle>

</telerik:RadHtmlChart>

</div>

<div id="slide_01" class="slide" style="border: 1px solid red; height: 250px; width: 350px;"">

<telerik:RadHtmlChart runat="server" Width="350px" Height="225px" ID="RadHtmlChart2"

DataSourceID="SqlDataSource2">

<PlotArea>

<Series>

<telerik:ColumnSeries DataFieldY="TotCount">

<TooltipsAppearance Color="White" />

</telerik:ColumnSeries>

</Series>

<XAxis DataLabelsField="Coverage">

<TitleAppearance Text="Member Types">

<TextStyle Margin="5" />

</TitleAppearance>

<MajorGridLines Visible="false" />

<MinorGridLines Visible="false" />

</XAxis>

<YAxis>

<TitleAppearance Text="# of Financials">

<TextStyle Margin="5" />

</TitleAppearance>

<MinorGridLines Visible="false" />

</YAxis>

</PlotArea>

<ChartTitle Text="Recent Qtr Financial Statements">

</ChartTitle>

</telerik:RadHtmlChart>

</div>

<telerik:RadSlider ID="RadSlider1" runat="server" TrackPosition="TopLeft" Value="0"

ItemType="Item" Skin="Black" Width="350px" Height="40px" OnClientValueChanged="UpdateVisibleSlide"

OnClientLoad="UpdateVisibleSlide">

<Items>

<telerik:RadSliderItem Text="# of Active ASI Credit Unions"></telerik:RadSliderItem>

<telerik:RadSliderItem Text="# of Financial Statements"></telerik:RadSliderItem>

</Items>

</telerik:RadSlider>

</div>

1 Answer, 1 is accepted

Accepted

answered on 03 Nov 2014, 01:01 PM

RadHtmlChart-RadWindowTest.zip

Hello Kurt,

I have tried to reproduce the mentioned issue with the provided code snippet but to no avail. You can see the chart's output here.

I can suggest that you try the following steps:
   - If you are not using the latest Telerik UI version - 2014.3.1024 does upgrading to it resolve the issue?
   - It may be possible that some global styles are affecting the appearance of the chart. Does removing all of the custom CSS resolve the problem? If that is so you can start turning one by one the styles until you find and fix the problematic one.
   - Decrease the width and height of the chart and set a negative value for the PlotArea's margin. For example:

<PlotArea>

<Appearance>

<TextStyle Margin="-30" />

</Appearance>

</PlotArea>

If the above steps, however, do not help could you please try to reproduce the unexpected behavior with the attached archive and then tell us what changes you have made, so that we can proceed further with the investigation?

Regards,
Danail Vasilev
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.