ExtJS 4.2.1 Chart Axis labeling

Question

i do have a chart in my application with many x-values. The labeling doesnt seem to work fine because there is e.g. no space between the labels like this:

I know i could make the labels vertical, though is there an other option to scale/place the labels mor intelligent? Or is doing it vertically the way to go?

Answer 1

I guess my first thought is are your labels the same length every time? Vertical labeling is often preferred because in many of the examples given we are using variable lengths for things like names.

Does your chart scroll off the screen because of all the columns? just curious.

Now you could try creating the grid with a set width to the columns, something like this and see how it does.

series: [{

    ....

    renderer: function(sprite, storeItem, barAttr, i, store) {
        // set a width that gives you enough space 
        barAttr.width = 60;
        return barAttr;
    },

    ....

now looking over my code I often use the Ext.String.ellipsis function to set the length of my labels under my columns. so something like this below where I trim at 8 characters:

axes: [{
    type: 'Category',
    position: 'bottom',
    fields: ['name'],
    label: {
        renderer: function(v) {
            return Ext.String.ellipsis(v, 8);
        },
    }

    ....

Answer 2

It work for me

{
                type: 'Category',
                position: 'bottom',
                fields: ['time'],
                title: 'Time',
                style: {
                    textAlign: 'center',
                },
                label: {
                    rotate: {
                        degrees: 270
                    }
                }
            }

enter image description here