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

Is it possible to text-wrap chart axis labels?

11 Answers 1126 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Suresh
Top achievements
Rank 1
Suresh asked on 17 Dec 2012, 06:04 AM
Hi,
Is there any direct way or work-around to text-wrap the axis labels for charts?
Thanks,
Suresh

11 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 17 Dec 2012, 07:13 PM
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!
0
Suresh
Top achievements
Rank 1
answered on 18 Dec 2012, 04:46 AM
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
0
Iliana Dyankova
Telerik team
answered on 18 Dec 2012, 01:43 PM
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!
0
Suresh
Top achievements
Rank 1
answered on 19 Dec 2012, 11:57 AM
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
0
Iliana Dyankova
Telerik team
answered on 20 Dec 2012, 09:52 AM
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!
0
July
Top achievements
Rank 1
answered on 21 Jun 2013, 07:04 AM
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.
0
Iliana Dyankova
Telerik team
answered on 24 Jun 2013, 11:07 AM
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!
0
Javan Smith
Top achievements
Rank 1
answered on 18 Oct 2013, 10:17 PM
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.
0
Iliana Dyankova
Telerik team
answered on 21 Oct 2013, 07:52 AM
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!
0
Alan Mosley
Top achievements
Rank 1
answered on 16 Jun 2014, 11:03 AM
Was text wrap ever implemented?
Thanks
0
Sebastian
Telerik team
answered on 16 Jun 2014, 11:12 AM
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!
 
Tags
Charts
Asked by
Suresh
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Suresh
Top achievements
Rank 1
July
Top achievements
Rank 1
Javan Smith
Top achievements
Rank 1
Alan Mosley
Top achievements
Rank 1
Sebastian
Telerik team
Share this question
or