How to adjust the categories's labels into a KendoChart? - kendo-ui

Question

I have been using a kendochart as in the example: http://jsfiddle.net/ericklanford/6dr0k59v/2/
the categoryAxis is deffined as:
categoryAxis: {
categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
majorGridLines: {
visible: false
},
},
If you note, it is difficult to see the labels under the categoryAxis.
There is any possibility to do something like this:

Answer 1

What you are proposing with your image is not available out of the box (but it is possible through some hacks). Officially you have two options - rotate the labels or skip every other label:
Skip every other label
To do that you need to specify a step value when you configure the labels, like this:
// ...
categoryAxis: {
categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
labels: {
step: 2
},
majorGridLines: {
visible: false
},
}
// ...
Rotate the labels
This will prevent them from overlapping because they will be sideways. That way they are easier to read, while you are not missing every other label. You need to set the rotation value to -90:
// ...
categoryAxis: {
categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
labels: {
rotation: -90
},
majorGridLines: {
visible: false
},
}
// ...
... and the hacky way
This is not officially supported and it requires some manipulation of the rendered svg image. We need to slightly change the color of the axis first, so that we can find the elements by color:
// ...
categoryAxis: {
categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
color: "#000001",
majorGridLines: {
visible: false
},
}
// ...
And then we will run a script that will find all the labels and increase the "y" position of every other label by 8 pixels:
$(document).ready(createChart);
var axisLabels = $("#chart").find("text[fill='#000001']");
for(i = 0; i < axisLabels.length; i += 2){
$(axisLabels[i]).attr("y",parseInt($(axisLabels[i]).attr("y")) + 8);
}
And here's the fiddle: http://jsfiddle.net/4Lsownbp/