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

CategoryAxis Label Rotation - align with column chart

5 Answers 390 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Ed
Top achievements
Rank 1
Ed asked on 14 Oct 2014, 04:44 PM
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]
  }]
});

5 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 15 Oct 2014, 08:32 AM
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!
 
0
Ed
Top achievements
Rank 1
answered on 15 Oct 2014, 04:21 PM
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
0
Iliana Dyankova
Telerik team
answered on 17 Oct 2014, 08:29 AM
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!
 
0
Peter
Top achievements
Rank 1
answered on 10 Dec 2015, 12:34 AM

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.

 

0
Iliana Dyankova
Telerik team
answered on 11 Dec 2015, 10:58 AM
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!
 
Tags
Charts
Asked by
Ed
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Ed
Top achievements
Rank 1
Peter
Top achievements
Rank 1
Share this question
or