CODEWITHSUNDEEP
kendo-uikendo-chart
Erick Lanford Xenes
Erick Lanford Xenes

Reputation: 1572

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

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:

enter image description here

Upvotes: 0

Views: 213

Answers (1)

Oggy
Oggy

Reputation: 1666

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/

Upvotes: 1

Related Questions