CategoryAxis Label Rotation - align with column chart

6 posts, 0 answers
  1. Ed
    Ed avatar
    168 posts
    Member since:
    Sep 2013

    Posted 14 Oct 2014 Link to this post

    On a column chart, categoryAxis Labels rotated at 300, with relatively long label text, the labels do not match up with the columns in the chart (want the tail of the label text to line up with the column chart).  We're not talking enormous labels, perhaps something like: "2011 xxxxxxxxxxxxxxxxxxxxxxxx"  I even tried using padding right, but that set padding on the top as well as right (is this a bug? even tried padding top to zero and had no effect).  Any suggestions?

    Ideally, I wouldn't have to use padding at all and there would be a way to have the tail of the label align with the column chart item.

    http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.labels.padding.right

    $("#chart").kendoChart({
      categoryAxis: [{
        labels: {
          padding: {
            right: 100,
            top: 0
          },
          rotation: 300
        },
        categories: ["2011 xxxxxxxxxxxxxxxxxxxxxxxx", "2012", "2013"]
      }],
      series: [{
        data: [1, 2, 3]
      }]
    });
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 15 Oct 2014 Link to this post

    Hi Ed,

    I am afraid what you would like to achieve is currently not supported - by design the categoryAxis.labels are rotated around its center. What I would suggest is to trim the labels after specific length (using a template). 
    $("#chart").kendoChart({
      //....
      categoryAxis: {
        //....
        labels: {
           template: "#= shortLabels(value)#"
        }
      }
    });
      
    function shortLabels(value) {
       if (value.length > 3) {
          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!
     
  3. Kendo UI is VS 2017 Ready
  4. Ed
    Ed avatar
    168 posts
    Member since:
    Sep 2013

    Posted 15 Oct 2014 in reply to Iliana Nikolova Link to this post

    Hi Iliana,

    I'll try the template idea.  The other issue is the padding problem.  Is that a bug or am I doing it wrong?

    Thanks,
    --Ed
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 17 Oct 2014 Link to this post

    Hi Ed,

    I believe this behaviour is correct. If you would like to move the labels to right when there is rotation I would suggest to use bottom padding. For your convenience here is a simple dojo.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Peter
    Peter avatar
    7 posts
    Member since:
    Jan 2015

    Posted 09 Dec 2015 Link to this post

    quick question on this rotation with bottom padding.

     When adding more data points, the labels don't line up properly.

     http://dojo.telerik.com/@pcutler/AbUPe

     see the 2nd and 3rd labels get way off.

     

  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 11 Dec 2015 Link to this post

    Hi Peter,

    This issue has been already addressed - please upgrade to the latest official version (dojo) and let me know you observe any further issues. 

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready