How to wrap text in Kendo Chart datasource lables?

2 posts, 0 answers
  1. Wenting
    Wenting avatar
    1 posts
    Member since:
    Oct 2015

    Posted 30 Nov 2015 Link to this post

    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

     

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 02 Dec 2015 Link to this post

    Hi Wenting,

    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!
     
  3. Kendo UI is VS 2017 Ready
Back to Top