CODEWITHSUNDEEP
kendo-uitelerik
David McSpadden
David McSpadden

Reputation: 449

Kendo UI Bar Chart Labels Rotation

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?

Upvotes: 5

Views: 7005

Answers (3)

Rashad Valliyengal
Rashad Valliyengal

Reputation: 3162

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))
    )

Upvotes: 3

David McSpadden
David McSpadden

Reputation: 449

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", ...]

Upvotes: 0

Robin Giltner
Robin Giltner

Reputation: 3055

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

Upvotes: 9

Related Questions