Wrap axis title

4 posts, 0 answers
  1. Roman
    Roman avatar
    17 posts
    Member since:
    Jan 2011

    Posted 13 Sep 2017 Link to this post

    Hello,

    We have limited height for ChartView and quite a long text as Y-axis title. Is there a way to make the axis title wrap its text?

  2. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3895 posts

    Posted 15 Sep 2017 Link to this post

    Hello Roman, 

    Thank you for writing.  

    The axis in RadChartView offers the LabelFitMode property which determines how the axis labels will be laid. They can't be wrapped but I can suggest you set the LabelFitMode property to Rotate and specify the LabelRotationAngle. Thus, you can gain some of the width that the labels occupy by default. 

    I hope this information helps. Should you have further questions I would be glad to help.

    Regards,
    Dess
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Roman
    Roman avatar
    17 posts
    Member since:
    Jan 2011

    Posted 15 Sep 2017 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    Hello Dess,

    I was asking about axis title, but not axis labels.

    Just in case someone will need a workaround for this issue, Telerik Support suggested to use chart's title instead of axis title. Chart's title may be positioned at the left side, display text vertically and will look like Y-axis title. And it can wrap text.

  4. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3895 posts

    Posted 15 Sep 2017 Link to this post

    Hello Roman, 

    Thank you for writing back. 

    Please excuse us for the misunderstanding. Wrapping the axis' title element is also not possible. The possible solution that I can suggest is to use the title of RadChartView which supports wrapping. Here is a sample code snippet:

    this.radChartView1.Title = "Lorem ipsum dolor sit amet, consectetur adipiscing elit";
    this.radChartView1.ChartElement.TitlePosition = TitlePosition.Left;
    this.radChartView1.ShowTitle = true;
    this.radChartView1.ChartElement.TitleElement.TextOrientation = Orientation.Vertical;
    this.radChartView1.ChartElement.TitleElement.TextWrap = true;
    this.radChartView1.ChartElement.TitleElement.FlipText = true;

    I hope this information helps. If you have any additional questions, please let me know. 

     Regards,
    Dess
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top