Defining Max height/width of Chart

2 posts, 1 answers
  1. Kurt Kluth
    Kurt Kluth avatar
    144 posts
    Member since:
    Oct 2009

    Posted 29 Oct 2014 Link to this post

    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>
  2. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 03 Nov 2014 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top