Is it possible to text-wrap chart axis labels?

12 posts, 0 answers
  1. Suresh
    Suresh avatar
    7 posts
    Member since:
    Nov 2012

    Posted 17 Dec 2012 Link to this post

    Hi,
    Is there any direct way or work-around to text-wrap the axis labels for charts?
    Thanks,
    Suresh
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 17 Dec 2012 Link to this post

    Hello Suresh,

    If I understand correctly your scenario you would like to trim the labels of the chart's axis to a specific length? If this is the case you can use a template for the labels and in it call a function which reduces the labels' width. For example: 
    $("#chart").kendoChart({
      //....
      categoryAxis: {
        //....
        labels: {
           template: "#= shortLabels(value)#"
        }
      }
    });
     
    function shortLabels(value) {
       if (value.length > 3) {
          value = value.substring(0, 5);
          return value;
       }
    }

    If you are requesting a different functionality, please elaborate a bit more.

    Regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Suresh
    Suresh avatar
    7 posts
    Member since:
    Nov 2012

    Posted 17 Dec 2012 Link to this post

    Hi Iliana,

    Thanks for your response. Actually we are looking for wrap functionality. For example, if the axis label is "Equipment planned production time", then we want to show it in two lines.  Following are the two main problems we have
        1.  Lengthy labels getting messed up with other axis labels.,
        2.  Chart size is getting reduced based on the label width.

    Best regards,
    Suresh
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 18 Dec 2012 Link to this post

    Hello Suresh,

    I am afraid at present it is not possible to achieve the wrap functionality in Kendo UI DataViz, however we will definitely consider its implementation for future releases. As for the points: 

    1. In order to prevent overlapping of the labels you could use the rotation property (to rotate the labels) or the step property (to render some of the labels);
    2. I am not quite sure if I understand this correctly. Could you please elaborate a bit more on it? Thank you in advance.
    Regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Suresh
    Suresh avatar
    7 posts
    Member since:
    Nov 2012

    Posted 19 Dec 2012 Link to this post

    Hi Iliana,

    Thank you for the information. Kindly let us know if the wrap feature is in consideration in near future so that we can plan accordingly.

    Regarding the second point, I have attached two pictures, one with short axis labels and the other with long labels. Let us know how we can handle this apart from trim options.

    Best regards,
    Suresh
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 20 Dec 2012 Link to this post

    Hi Suresh,

    I am afraid I cannot give you exact time frame for the wrap feature at this point. I can suggest you to follow the official Kendo UI Roadmap which says what will be implemented for sure for the next release.

    Regarding the second point, this is the default behavior of the Kendo UI Chart and I am afraid there is no suitable workaround that can be suggested in order to change it. Please excuse us for the inconvenience caused.

    Kind regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. July
    July avatar
    1 posts
    Member since:
    Jun 2013

    Posted 21 Jun 2013 Link to this post

    Hi!
    This question was asked in December and now it's June. Has anything changed since that time? Is there way to solve the problem with long labels?

    May be it's possible to place long text into legend changing axis labels to numbers?

    Thanks.
  9. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 24 Jun 2013 Link to this post

    Hi July, 

    I am afraid "text-wrap" feature is still not available in Kendo UI Chart, however you could try the suggested workarounds in my previous posts.

    Regarding your other question, yes this can be achieved - by design the legend shows series names and it does not depend on the axes labels. For working example check this online demo.  

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Javan Smith
    Javan Smith avatar
    3 posts
    Member since:
    Oct 2009

    Posted 18 Oct 2013 Link to this post

    any chance that progress has been made?    We run into this with our labels on pie slices.   It seems to be a moderately common issue with labels.
  11. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 21 Oct 2013 Link to this post

    Hello Javan,

    Unfortunately "text-frap" functionality is not implemented yet, however we are working on it and will do our best to provide it as soon as possible. Please excuse us for the inconvenience caused.

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  12. Alan Mosley
    Alan Mosley avatar
    200 posts
    Member since:
    Apr 2010

    Posted 16 Jun 2014 in reply to Iliana Nikolova Link to this post

    Was text wrap ever implemented?
    Thanks
  13. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 16 Jun 2014 Link to this post

    Hi guys,

    This feature is tentatively planned for Q2 2014, due in the middle of next month. You can screen its status  here on our feedback portal.

    Kind regards,
    Sebastian
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready