This is a migrated thread and some comments may be shown as answers.

Axis Label positioning

3 Answers 198 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
William Higgins
Top achievements
Rank 2
William Higgins asked on 03 Oct 2012, 02:53 PM
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.

3 Answers, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 04 Oct 2012, 09:50 AM
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.
0
Michael
Top achievements
Rank 1
answered on 15 Apr 2013, 04:25 PM
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.
0
Danail Vasilev
Telerik team
answered on 18 Apr 2013, 07:16 AM
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.
Tags
Chart (HTML5)
Asked by
William Higgins
Top achievements
Rank 2
Answers by
Marin Bratanov
Telerik team
Michael
Top achievements
Rank 1
Danail Vasilev
Telerik team
Share this question
or