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

How to make axis label shown in multiple lines

1 Answer 275 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Jianxun
Top achievements
Rank 1
Jianxun asked on 23 Dec 2013, 07:01 AM
I would like to show each x axis label in two line, e.g.,   I want to show a date label 
2013-12-23 14:59:00
as two lines formatting:
14:59:00 
2013-12-23

if I just show x axis in one line, then the labels are too long and will overlap.
Anyone knows how to do that?

1 Answer, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 23 Dec 2013, 08:44 AM
Hi Jianxun,

I am afraid showing axes labels on multiple lines is not supported by Kendo UI Chart at this point, however we keep this idea in mind for future releases. Meanwhile in order to prevent labels overlapping you may consider using one of the following approaches:
  • Rotate the labels;
  • Render only some of the labels (step option);
  • Use labels.temlplate and trim the labels after specific length:
    $("#chart").kendoChart({
      //....
      categoryAxis: {
        //....
        labels: {
           template: "#= shortLabels(value)#"
        }
      }
    });
      
    function shortLabels(value) {
       if (value.length > 5) {
          value = value.substring(0, 5);
          return value;
       }
    }

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
Jianxun
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Share this question
or