RadHtmlChart rendering axis labels and title under axis instead of chart

2 posts, 0 answers
  1. Sean
    Sean avatar
    1 posts
    Member since:
    Jun 2013

    Posted 24 Jun 2013 Link to this post

    I am attempting to display several dynamically generated series in a line chart using the RadHtmlChart, however the axis labels and title are rendering under the axis instead of the chart (DefaultRendering.png). I found a similar question that had the answer of "use the 'AxisCrossingValue' of the YAxis"; when i apply the minimum chart value i get the result in "RenderingWithAxisCrossingValue.png". How can I get the chart to render with both title and labels below the chart area as depicted in "RequiredRendering.png"?
    Thanks,
    Sean
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 27 Jun 2013 Link to this post

    Hello Sean,

    In the current version of RadControls it is not possible to directly move the XAxis labels and title below the chart's plot area. You can achieve that, however, by setting appropriate margin/padding to the XAxis' labes and titles. For example:
    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server">
        <PlotArea>
            <Series>
                <telerik:LineSeries>
                    <SeriesItems>
                        <telerik:CategorySeriesItem Y="300" />
                        <telerik:CategorySeriesItem Y="-200" />
                        <telerik:CategorySeriesItem Y="100" />
                    </SeriesItems>
                </telerik:LineSeries>
            </Series>
            <XAxis>
                <TitleAppearance Text="Axis Title">
                    <TextStyle Margin="-150px" />
                </TitleAppearance>
                <LabelsAppearance>
                    <TextStyle Margin="160px" />
                </LabelsAppearance>
                <Items>
                    <telerik:AxisItem LabelText="item1" />
                    <telerik:AxisItem LabelText="item2" />
                    <telerik:AxisItem LabelText="item3" />
                </Items>
            </XAxis>
        </PlotArea>
    </telerik:RadHtmlChart>
    Note that setting margin/padding to chart's elements will modify the dimensions of the chart itself, in order to fit in with the set width and height.

    You can also find useful Labels and Titles Font Settings help article.


    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
Back to Top