Question

I’m writing Ext JS 4 line chart component. It works all fine, but when I display labels under axis they are just too dense. I won’t the number of visible labels to decrease. How to do that? Here’s my code for the axis:

{
    type: 'Category',
    position: 'bottom',
    fields: ['date'],
    grid: true,
    label: {
        field: 'label',
        rotate: { degrees:315 },
        renderer: function(item) {
            var date = new Date(item);
            /* parseIntToStringWithZeros is a custom method somewhere else */
            var day = parseIntToStringWithZeros(date.getDate());
            var month = parseIntToStringWithZeros(date.getMonth());
            result = day + '-' + month;
            return result;
        }
    }
}

Answer 1

I think you might need to use a “Numeric” axis instead of a “Category” axis a start (not sure what your data looks like, but you might need to convert times to values to get it to work).

With the numeric axis you are supposed to be able to set the number of major tick values (where the grid lines and labels appear), by setting the steps property in the axis config; however this doesn’t always work. A more surefire way is to override the applyData function which isn’t documented so you need to search through the dev code to see what it’s doing.

Also, to simply not render a particular label you can just return the empty string in the label renderer function. e.g. if you only want an individual “month” to show up once in the above code you could do something like this..

label: {
    ....
    renderer: (function(){
       var lastRenderedMonth = '';
       return function(item){
           ... //your code above without the return..
           if(month == lastRenderedMonth)
              return "";
           lastRenderedMonth = month;
           return result;
       };
    })(),
    ...