Applying Attribute Width="100%" shrinks the Chart

Thread is closed for posting
3 posts, 2 answers
  1. Pivetal
    Pivetal avatar
    12 posts
    Member since:
    Apr 2007

    Posted 17 May 2008 Link to this post

    Hi,

    When I apply Width="100%" to the RadChart, it shrinks the chart rather than filling the div for example:

    <div id="chartPlaceholder" style="width:100%;" >
        <telerik:RadChart ID="RadChart2" SkinsOverrideStyles="true" runat="server"
        Width="100%">
            <PlotArea>
                <XAxis MaxValue="5" MinValue="1" Step="1">
                </XAxis>
                <YAxis MaxValue="3" Step="0.5" AxisMode="Extended">
                </YAxis>
                <YAxis2 MaxValue="5" MinValue="1" Step="1">
                </YAxis2>
            </PlotArea>
            <Series>
                <telerik:ChartSeries Name="Series 1" Type="Line">
                    <Items>
                        <telerik:ChartSeriesItem YValue="1" Name="Item 20">
                        </telerik:ChartSeriesItem>
                        <telerik:ChartSeriesItem YValue="2" Name="Item 100">
                        </telerik:ChartSeriesItem>
                        <telerik:ChartSeriesItem YValue="1" Name="Item 100">
                        </telerik:ChartSeriesItem>
                        <telerik:ChartSeriesItem YValue="3" Name="Item 20">
                        </telerik:ChartSeriesItem>
                    </Items>
                </telerik:ChartSeries>
                <telerik:ChartSeries Name="Series 2" Type="Line">
                    <Items>
                        <telerik:ChartSeriesItem YValue="3" Name="Item 80">
                        </telerik:ChartSeriesItem>
                        <telerik:ChartSeriesItem YValue="1" Name="Item 10">
                        </telerik:ChartSeriesItem>
                        <telerik:ChartSeriesItem YValue="3" Name="Item 10">
                        </telerik:ChartSeriesItem>
                        <telerik:ChartSeriesItem YValue="1" Name="Item 80">
                        </telerik:ChartSeriesItem>
                    </Items>
                </telerik:ChartSeries>
            </Series>
        </telerik:RadChart>
    </div>

    Is there a way where I can get the chart to fill the containing DIV tag.

    Thanks
    Bleddyn
  2.
  3. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 19 May 2008 Link to this post

    Hi,

    Go through the following forum link which discusses a similar scenario.
    Set Chart Width to 100% of Zone

    Shinu.
  5. Answer
    Ves
    Admin
    Ves avatar
    2926 posts

    Posted 19 May 2008 Link to this post

    Hi Bleddyn,

    RadChart does not support width in percent. It is rendered as image and it should have its size calculated at render time and unfortunately this is not possible if its dimensions are provided in percents as the actual size may vary, depending on various client-side conditions.

    In addition to Shinu's suggestion, you can check the approach shown in this code library entry. You will find projects for sever-side and for client-side resize. Basically, the main idea of server-side implementation is to find out the with of the chart container and set chart's width in pixels.

    I hope this helps.

    All the best,
    Ves
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
Back to Top