extjs - Sencha Ext JS 4 Chart: Customize xField (Category) label position -

i trying port application flex 3 sencha ext js 4. application has dashboard having column chart (pleasee see first image below). value xfield long text.

as possible, don't want label rotated. well, think it's kinda messy. if possible, want label positioned alternately if doesn't fit.

label : {     rotate : {degrees:45} } 

below image sencha custom chart. of category label not shown.

i thinking of customizing onplacelabel function don't know how so. how gonna achieve needed?

that's ext.chart.axis.axis#drawhoriztontallabels need override. onplacelabel stuff written in chart itself. labels @ top of bar, see mean?

the clean way override class , implement jolly options. i'll let explore full code i've put @ end of post if want understand implementation...

ext.define('ext.ux.chart.axis.axis.overlappinglabeloptions', {     override: 'ext.chart.axis.axis'      ,labelrows: 1      ,hideoverlappinglabels: true      ,drawhorizontallabels: function() {         // ... see @ end of post full implementation     } }); 

once you've included override class using require, can use these 2 options in axis definition. example:

{     type: 'category',     position: 'bottom',     fields: ['name'],     title: 'sample metrics',      labelrows: 5,     hideoverlappinglabels: false } 

my first try automatically push overlapping labels 1 row lower. that's obtain setting labelrows: 'auto'. works under conditions, , has advantage of being automatic.

unfortunately, can messy:

so resorted implement option let fix number of label rows, , evenly distribute labels among these rows. added hideoverlappinglabels ensure no label lost if miss luck , label ends overlapping.

here's configuration:

{     // ...     hideoverlappinglabels: false,     labelrows: 5 } 

i hope give need, or @ least knowledge bend ext's code desires!

full implementation

/**  * override adds {@link #labelrows} option draw horizontal axis labels on multiple  * rows, , {@link #hideoverlappinglabels} option.  */ ext.define('ext.ux.chart.axis.axis.overlappinglabeloptions', {     override: 'ext.chart.axis.axis'      ,alternateclassname: 'ext.ux.axisoverlappinglabeloptions'      /**      * @cfg {integer/string}      *      * number of label rows. if option set 'auto', overlapping labels      * drawn on next row don't overlap. can give messy result.      */     ,labelrows: 1      /**      * @cfg {boolean}      *      * set false prevent automatic hiding of overlapping labels.      */     ,hideoverlappinglabels: true      ,drawhorizontallabels: function() {         var me = this,             labelconf = me.label,             floor = math.floor,             max = math.max,             axes = me.chart.axes,             insetpadding = me.chart.insetpadding,             gutters = me.chart.maxgutters,             position = me.position,             inflections = me.inflections,             ln = inflections.length,             labels = me.labels,             maxheight = 0,             ratio,             bbox, point, prevlabel, prevlabelid,             adjustend = me.adjustend,             hasleft = axes.findindex('position', 'left') != -1,             hasright = axes.findindex('position', 'right') != -1,             textlabel, text,             last, x, y, i, firstlabel;          var labelrows = ext.num(this.labelrows, 1),             autooffsetlabels = this.labelrows === 'auto',             hidelabels = this.hideoverlappinglabels;          var lastlabelonrow = [],             row, j;          last = ln - 1;         //get reference first text label dimensions         point = inflections[0];         firstlabel = me.getorcreatelabel(0, me.label.renderer(labels[0]));         ratio = math.floor(math.abs(math.sin(labelconf.rotate && (labelconf.rotate.degrees * math.pi / 180) || 0)));          (i = 0; < ln; i++) {             row = 0; // rx: start @ first row             point = inflections[i];             text = me.label.renderer(labels[i]);             textlabel = me.getorcreatelabel(i, text);             bbox = textlabel._bbox;             //maxheight = max(maxheight, bbox.height + me.dashsize + me.label.padding);             x = floor(point[0] - (ratio ? bbox.height : bbox.width) / 2);             if (adjustend && gutters.left == 0 && gutters.right == 0) {                 if (i == 0 && !hasleft) {                     x = point[0];                 }                 else if (i == last && !hasright) {                     x = math.min(x, point[0] - bbox.width + insetpadding);                 }             }             if (position == 'top') {                 y = point[1] - (me.dashsize * 2) - me.label.padding - (bbox.height / 2);             }             else {                 y = point[1] + (me.dashsize * 2) + me.label.padding + (bbox.height / 2);             }              // rx: vertical offset             y += (i % labelrows) * bbox.height;              textlabel.setattributes({                 hidden: false,                 x: x,                 y: y             }, true);              if (autooffsetlabels) {                 // rx: find row on can draw label without overlapping                 (j=0; j<lastlabelonrow.length; j++) {                     if (me.intersect(textlabel, lastlabelonrow[j])) {                         row++;                         textlabel.setattributes({                             y: y + row * bbox.height                         }, true);                     }                 }                  // rx: calc maxheight knowing row                 maxheight = max(maxheight, bbox.height + me.dashsize + me.label.padding + (bbox.height * row));                  // rx: keep reference know can place next label                 lastlabelonrow[row] = textlabel;             } else {                  if (hidelabels) {                     // skip label if there isn't available minimum space                     if (i != 0 && (me.intersect(textlabel, prevlabel)                         || me.intersect(textlabel, firstlabel))) {                         if (i === last && prevlabelid !== 0) {                             prevlabel.hide(true);                         } else {                             textlabel.hide(true);                             continue;                         }                     }                 }                  maxheight = max(maxheight, bbox.height + me.dashsize + me.label.padding + bbox.height * (i % labelrows));             }              prevlabel = textlabel;             prevlabelid = i;         }          return maxheight;     } });