Kendo UI Bar Chart Labels Rotation

5
votes

I have a Kendo UI (Telerik) bar chart with long label names. When I set the label rotation to anything outside of 0,180,90,360 the labels slant but they use the center of the text as the slant point instead of the start of the text. This causes all the labels to be off by a full bar.

http://snag.gy/m2XxJ.jpg

Is there a way to get the chart to use the start of the label as the rotation point instead of the center?

3
kendo-uitelerik

3 Answers

9
votes

The only way I've gotten the labels to line up properly when using rotation, is to also set the padding.

Sample categoryAxis

categoryAxis: { field: 'name', labels: { rotation: -60, padding: { right: 10 }}}

JSbin sample http://jsbin.com/zoloc/1/edit

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

3
votes

You can use both rotation and margin to arrange the category axis text like this,

 .CategoryAxis(axis => axis
        .Categories(model => model.StudentName).Labels(labels => labels.Rotation(330).Margin(-5,45,0,0).Visible(true))
        .MajorGridLines(lines => lines.Visible(false))
        .Line(line => line.Visible(false))
    )
0
votes

Response from Telerik:

You have a valid point. Excel for example rotates the text around its left edge. We'll look into this issue, but for the moment I can only suggest the multi-line option in the upcoming Q2 release.

You'll be able to split the labels by using a new-line character: categories: ["J.R. SIMPLOT\nCOMPANY", ...]