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
Charts
This is a migrated thread and some comments may be shown as answers.
Wenting
Top achievements
Rank 1
Wenting asked on 30 Nov 2015, 06:32 PM

http://www.telerik.com/forums/is-it-possible-to-text-wrap-chart-axis-labels 

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

@(Html.Kendo().Chart<AssignmentModel>()
.Name("AssignmentChart")

.Legend(legend => legend

              .Visible(true)
              .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){
        debugger;
        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

222222222222</text>

 

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: 

http://stackoverflow.com/questions/13247577/line-break-in-category-label-of-kendo-ui-chart

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!

 

Best,

Wenting

 

1 Answer, 1 is accepted

Sort by
0
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.

Regards,
Iliana Nikolova
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
Wenting
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Share this question
or