Applying Attribute Width="100%" shrinks the Chart

[Pivetal]

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

[Shinu]

Hi,

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

Shinu.

[Ves]

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