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

How to wrap text in Kendo Chart datasource lables?

1 Answer 314 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Wenting asked on 30 Nov 2015, 06:32 PM 

Based on the above post, I implemented labels template like following: 


.Legend(legend => legend

              .Labels(labels => labels .Font("13px open sans").Template("#= wrapText(text)#")))
              .DataSource(ds =>
                    ds.Read(read => read.Url("/GetAssignments"))
                        .Group(group => group.Add(Model => Model.PROGRAM_NAME))



function wrapText(value){
        if (value.length > 24){
            value = value.substring(0, 24) + "\n" + value.substring(24);
        return value;


But the approach didn't produce the desired effect, when I inspected element in the front end, it looks like this:

<text id="k10384" data-model-id="k10385" x="453" y="196" fill-opacity="1" style="font: 13px open sans; cursor: pointer;" fill="#232323">TestPolicy22222222222222



However, on the page it displays all the same as when no wrapping is performed, as seen in the attachment. 


 I also looked up in some other post:

The information told me the text wrapping in lables is already implemented in Kendo, by using line feed characters ("\n").

I wonder if the implemented line break functionality is only for chart labels, or for both datasource labels and chart labels? 

 Thank you very much!





1 Answer, 1 is accepted

Sort by
Iliana Nikolova
Telerik team
answered on 02 Dec 2015, 01:43 PM
Hi ,

I posted a reply in your other thread, however here is my answer too: 

I tested this scenario using the provided code snippet and it is working as expected on my side (short screencast capture). Could you please make sure you are using v2015.3.1111 as pointed in the ticket info (you could check this by writing kendo.version in the browser console)?

In order to avoid further duplications, I would like to ask you to continue the discussion in only one of the threads. Thank you in advance for your understanding and cooperation.

Iliana Nikolova
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Asked by
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Share this question