RadHtmlChart position

[Segev]

Hi,

I'm trying to position my pie chart at the left side of the div.

I've found the title position:

<ChartTitle Text="Total">
    <Appearance Align="Center" BackgroundColor="White" Position="Top"></Appearance>
</ChartTitle>

And the legend position:

<Legend>
    <Appearance BackgroundColor="White" Position="Right" Visible="true"></Appearance>
</Legend>

But I didn't find how to position the chart itself, to be aligned to the left, and not to the center.
Currently it's always at the center of its containing div.

Thanks,
Guy Segev.

[Danail Vasilev]

Hi Guy,

You can put the RadHtmlChart inside a DIV element and then set the DIV's align attribute. For example:

<div style="width: 800px; border: 1px solid red;" align="left">
    <telerik:RadHtmlChart ID="RadHtmlChart2" runat="server" Width="400px" Height="400px">
        <PlotArea>
            <Series>
                <telerik:PieSeries>
                    <Items>
                        <telerik:SeriesItem YValue="10" />
                        <telerik:SeriesItem YValue="20" />
                    </Items>
                </telerik:PieSeries>
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>
</div>

Regards,
Danail Vasilev
Telerik

[KARTHIK]

Hi Telerik Team,
  Is is possible to change RadHtmlChart Navigator position to the Top Instead below to the chart?

[Danail Vasilev]

Hello,

I am sorry to say that in the current version of RadControls it is not possible to control the position of the Navigator pane.

Regards,
Danail Vasilev
Telerik

[Stewart]

Setting the alignment of the div doesn't work and isn't a valid element. The best solution I could find is:

<div style="float: left; width: 63%;>
  <telerik:RadHtmlChart ID="PieChart1" runat="server" Width="100%" Height="100%">
    <Legend>
        <Appearance Visible="false">
        </Appearance>
    </Legend>
    <PlotArea>
        <Series>
            <telerik:PieSeries Name="PieSeries1" StartAngle="90">
                <SeriesItems>
                    <telerik:PieSeriesItem BackgroundColor="#c20000" Exploded="True" Name="A" Y="40" />
                    <telerik:PieSeriesItem BackgroundColor="#ff7a00" Name="B" Y="20" />
                    <telerik:PieSeriesItem BackgroundColor="#ffc700" Name="C" Y="10" />
                    <telerik:PieSeriesItem BackgroundColor="#8dcb2a" Name="D" Y="10" />
                    <telerik:PieSeriesItem BackgroundColor="#2a94cb" Name="E" Y="10" />
                    <telerik:PieSeriesItem BackgroundColor="#800080" Name="F" Y="10" />
                </SeriesItems>
            </telerik:PieSeries>
        </Series>
    </PlotArea>
  </telerik:RadHtmlChart>
</div>

<div style="float: right; width: 37%;>
  <telerik:RadHtmlChart ID="PieChart1" runat="server" Width="100%" Height="100%">
    <Legend>
        <Appearance Position="Right" Visible="true">
        </Appearance>
    </Legend>
    <PlotArea>
        <Series>
            <telerik:PieSeries Name="PieSeries1" StartAngle="90">
                <SeriesItems>
                    <telerik:PieSeriesItem BackgroundColor="#c20000" Name="A" Y="40" />
                    <telerik:PieSeriesItem BackgroundColor="#ff7a00" Name="B" Y="20" />
                    <telerik:PieSeriesItem BackgroundColor="#ffc700" Name="C" Y="10" />
                    <telerik:PieSeriesItem BackgroundColor="#8dcb2a" Name="D" Y="10" />
                    <telerik:PieSeriesItem BackgroundColor="#2a94cb" Name="E" Y="10" />
                    <telerik:PieSeriesItem BackgroundColor="#800080" Name="F" Y="10" />
                </SeriesItems>
            </telerik:PieSeries>
        </Series>
    </PlotArea>
  </telerik:RadHtmlChart>
</div>