RadHtmlChart position

5 posts, 0 answers
  1. Segev
    Segev avatar
    27 posts
    Member since:
    Sep 2010

    Posted 09 Jun 2013 Link to this post

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

    Posted 11 Jun 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. KARTHIK
    KARTHIK avatar
    21 posts
    Member since:
    Oct 2013

    Posted 16 Dec 2013 Link to this post

    Hi Telerik Team,
      Is is possible to change RadHtmlChart Navigator position to the Top Instead below to the chart?
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 17 Dec 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. Stewart
    Stewart avatar
    1 posts
    Member since:
    May 2011

    Posted 13 Jun 2015 Link to this post

    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>
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017