Axis Label positioning

4 posts, 1 answers
  1. William Higgins
    William Higgins avatar
    8 posts
    Member since:
    Jul 2009

    Posted 03 Oct 2012 Link to this post

    I am working on some charts that need to have the x-axis labels angled at a -45 degrees.  When I do this the labels are centered on the tick marks.  I was wondering if there is a way to adjust the position of the labels to where the end of the label will line up with the tick marks instead of the label being centered on the tick marks.
  2.
  3. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    5897 posts

    Posted 04 Oct 2012 Link to this post

    Hi William,

    I am afraid this functionality is not available in RadHtmlChart for the time being. For Q3 2012 the series labels will have additional properties to control their appearance (e.g. padding, margin) and we are considering extending this to the axis labels as well, but I cannot provide any estimate on this.


    Greetings,
    Marin Bratanov
    the Telerik team
    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 their blog feed now.
  5. Michael
    Michael avatar
    1 posts
    Member since:
    Nov 2012

    Posted 15 Apr 2013 Link to this post

    We're having the same issue here.  When the label is too long it'll overlap another label since they both try to center under the column.  If I could tell the label to end under the column it would fix this issue.  See attached image for what the problem looks like.
  7. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1502 posts

    Posted 18 Apr 2013 Link to this post

    Hello Michael,

    The issue with the long labels can be solved either by wrapping them, decreasing their FontSize or trimming them. Please find below my comments on these points:
    • Wrapping labels - RadHtmlChart renders as SVG and the labels are rendered within the text element of the SVG. There is a known limitation in SVG that does not let you put line breaks in the text element, so that the labels cannot be wrapped. More information on this matter is available here. For the time being you can vote on this feedback item.
    • Decreasing the FontSize of the labels - Since Q1 2013, the RadHtmlChart exposes the TextStyle property that lets you modify the appearance of the labels, titles and legend. Therefore you can use this property in order to decrease the FontSize of the XAxis labes.
    • Trimming labels - You can use the standard .NET method in order to trim the labels if you set them programmatically, or trim the labels column from the datasource, in case the HtmlChart is databound.


    Kind regards,
    Danail Vasilev
    the Telerik team
    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 their blog feed now.
Back to Top