docs/source/Bar2.html

   1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-chart.series.Bar'>/**
   2 </span> * Creates a Bar Chart. A Bar Chart is a useful visualization technique to display quantitative information for
   3  * different categories that can show some progression (or regression) in the dataset. As with all other series, the Bar
   4  * Series must be appended in the *series* Chart array configuration. See the Chart documentation for more information.
   5  * A typical configuration object for the bar series could be:
   6  *
   7  * {@img Ext.chart.series.Bar/Ext.chart.series.Bar.png Ext.chart.series.Bar chart series}
   8  *
   9  *     var store = Ext.create('Ext.data.JsonStore', {
  10  *         fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
  11  *         data: [
  12  *             {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
  13  *             {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
  14  *             {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
  15  *             {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
  16  *             {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
  17  *         ]
  18  *     });
  19  *
  20  *     Ext.create('Ext.chart.Chart', {
  21  *         renderTo: Ext.getBody(),
  22  *         width: 500,
  23  *         height: 300,
  24  *         animate: true,
  25  *         store: store,
  26  *         axes: [{
  27  *             type: 'Numeric',
  28  *             position: 'bottom',
  29  *             fields: ['data1'],
  30  *             label: {
  31  *                 renderer: Ext.util.Format.numberRenderer('0,0')
  32  *             },
  33  *             title: 'Sample Values',
  34  *             grid: true,
  35  *             minimum: 0
  36  *         }, {
  37  *             type: 'Category',
  38  *             position: 'left',
  39  *             fields: ['name'],
  40  *             title: 'Sample Metrics'
  41  *         }],
  42  *         series: [{
  43  *             type: 'bar',
  44  *             axis: 'bottom',
  45  *             highlight: true,
  46  *             tips: {
  47  *               trackMouse: true,
  48  *               width: 140,
  49  *               height: 28,
  50  *               renderer: function(storeItem, item) {
  51  *                 this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' views');
  52  *               }
  53  *             },
  54  *             label: {
  55  *               display: 'insideEnd',
  56  *                 field: 'data1',
  57  *                 renderer: Ext.util.Format.numberRenderer('0'),
  58  *                 orientation: 'horizontal',
  59  *                 color: '#333',
  60  *                 'text-anchor': 'middle'
  61  *             },
  62  *             xField: 'name',
  63  *             yField: ['data1']
  64  *         }]
  65  *     });
  66  *
  67  * In this configuration we set `bar` as the series type, bind the values of the bar to the bottom axis and set the
  68  * xField or category field to the `name` parameter of the store. We also set `highlight` to true which enables smooth
  69  * animations when bars are hovered. We also set some configuration for the bar labels to be displayed inside the bar,
  70  * to display the information found in the `data1` property of each element store, to render a formated text with the
  71  * `Ext.util.Format` we pass in, to have an `horizontal` orientation (as opposed to a vertical one) and we also set
  72  * other styles like `color`, `text-anchor`, etc.
  73  */
  74 Ext.define('Ext.chart.series.Bar', {
  75
  76     /* Begin Definitions */
  77
  78     extend: 'Ext.chart.series.Cartesian',
  79
  80     alternateClassName: ['Ext.chart.BarSeries', 'Ext.chart.BarChart', 'Ext.chart.StackedBarChart'],
  81
  82     requires: ['Ext.chart.axis.Axis', 'Ext.fx.Anim'],
  83
  84     /* End Definitions */
  85
  86     type: 'bar',
  87
  88     alias: 'series.bar',
  89 <span id='Ext-chart.series.Bar-cfg-column'>    /**
  90 </span>     * @cfg {Boolean} column Whether to set the visualization as column chart or horizontal bar chart.
  91      */
  92     column: false,
  93
  94 <span id='Ext-chart.series.Bar-cfg-style'>    /**
  95 </span>     * @cfg style Style properties that will override the theming series styles.
  96      */
  97     style: {},
  98
  99 <span id='Ext-chart.series.Bar-cfg-gutter'>    /**
 100 </span>     * @cfg {Number} gutter The gutter space between single bars, as a percentage of the bar width
 101      */
 102     gutter: 38.2,
 103
 104 <span id='Ext-chart.series.Bar-cfg-groupGutter'>    /**
 105 </span>     * @cfg {Number} groupGutter The gutter space between groups of bars, as a percentage of the bar width
 106      */
 107     groupGutter: 38.2,
 108
 109 <span id='Ext-chart.series.Bar-cfg-xPadding'>    /**
 110 </span>     * @cfg {Number} xPadding Padding between the left/right axes and the bars
 111      */
 112     xPadding: 0,
 113
 114 <span id='Ext-chart.series.Bar-cfg-yPadding'>    /**
 115 </span>     * @cfg {Number} yPadding Padding between the top/bottom axes and the bars
 116      */
 117     yPadding: 10,
 118
 119     constructor: function(config) {
 120         this.callParent(arguments);
 121         var me = this,
 122             surface = me.chart.surface,
 123             shadow = me.chart.shadow,
 124             i, l;
 125         Ext.apply(me, config, {
 126             highlightCfg: {
 127                 lineWidth: 3,
 128                 stroke: '#55c',
 129                 opacity: 0.8,
 130                 color: '#f00'
 131             },
 132
 133             shadowAttributes: [{
 134                 &quot;stroke-width&quot;: 6,
 135                 &quot;stroke-opacity&quot;: 0.05,
 136                 stroke: 'rgb(200, 200, 200)',
 137                 translate: {
 138                     x: 1.2,
 139                     y: 1.2
 140                 }
 141             }, {
 142                 &quot;stroke-width&quot;: 4,
 143                 &quot;stroke-opacity&quot;: 0.1,
 144                 stroke: 'rgb(150, 150, 150)',
 145                 translate: {
 146                     x: 0.9,
 147                     y: 0.9
 148                 }
 149             }, {
 150                 &quot;stroke-width&quot;: 2,
 151                 &quot;stroke-opacity&quot;: 0.15,
 152                 stroke: 'rgb(100, 100, 100)',
 153                 translate: {
 154                     x: 0.6,
 155                     y: 0.6
 156                 }
 157             }]
 158         });
 159         me.group = surface.getGroup(me.seriesId + '-bars');
 160         if (shadow) {
 161             for (i = 0, l = me.shadowAttributes.length; i &lt; l; i++) {
 162                 me.shadowGroups.push(surface.getGroup(me.seriesId + '-shadows' + i));
 163             }
 164         }
 165     },
 166
 167     // @private sets the bar girth.
 168     getBarGirth: function() {
 169         var me = this,
 170             store = me.chart.store,
 171             column = me.column,
 172             ln = store.getCount(),
 173             gutter = me.gutter / 100;
 174
 175         return (me.chart.chartBBox[column ? 'width' : 'height'] - me[column ? 'xPadding' : 'yPadding'] * 2) / (ln * (gutter + 1) - gutter);
 176     },
 177
 178     // @private returns the gutters.
 179     getGutters: function() {
 180         var me = this,
 181             column = me.column,
 182             gutter = Math.ceil(me[column ? 'xPadding' : 'yPadding'] + me.getBarGirth() / 2);
 183         return me.column ? [gutter, 0] : [0, gutter];
 184     },
 185
 186     // @private Get chart and data boundaries
 187     getBounds: function() {
 188         var me = this,
 189             chart = me.chart,
 190             store = chart.substore || chart.store,
 191             bars = [].concat(me.yField),
 192             barsLen = bars.length,
 193             groupBarsLen = barsLen,
 194             groupGutter = me.groupGutter / 100,
 195             column = me.column,
 196             xPadding = me.xPadding,
 197             yPadding = me.yPadding,
 198             stacked = me.stacked,
 199             barWidth = me.getBarGirth(),
 200             math = Math,
 201             mmax = math.max,
 202             mabs = math.abs,
 203             groupBarWidth, bbox, minY, maxY, axis, out,
 204             scale, zero, total, rec, j, plus, minus;
 205
 206         me.setBBox(true);
 207         bbox = me.bbox;
 208
 209         //Skip excluded series
 210         if (me.__excludes) {
 211             for (j = 0, total = me.__excludes.length; j &lt; total; j++) {
 212                 if (me.__excludes[j]) {
 213                     groupBarsLen--;
 214                 }
 215             }
 216         }
 217
 218         if (me.axis) {
 219             axis = chart.axes.get(me.axis);
 220             if (axis) {
 221                 out = axis.calcEnds();
 222                 minY = out.from || axis.prevMin;
 223                 maxY = mmax(out.to || axis.prevMax, 0);
 224             }
 225         }
 226
 227         if (me.yField &amp;&amp; !Ext.isNumber(minY)) {
 228             axis = Ext.create('Ext.chart.axis.Axis', {
 229                 chart: chart,
 230                 fields: [].concat(me.yField)
 231             });
 232             out = axis.calcEnds();
 233             minY = out.from || axis.prevMin;
 234             maxY = mmax(out.to || axis.prevMax, 0);
 235         }
 236
 237         if (!Ext.isNumber(minY)) {
 238             minY = 0;
 239         }
 240         if (!Ext.isNumber(maxY)) {
 241             maxY = 0;
 242         }
 243         scale = (column ? bbox.height - yPadding * 2 : bbox.width - xPadding * 2) / (maxY - minY);
 244         groupBarWidth = barWidth / ((stacked ? 1 : groupBarsLen) * (groupGutter + 1) - groupGutter);
 245         zero = (column) ? bbox.y + bbox.height - yPadding : bbox.x + xPadding;
 246
 247         if (stacked) {
 248             total = [[], []];
 249             store.each(function(record, i) {
 250                 total[0][i] = total[0][i] || 0;
 251                 total[1][i] = total[1][i] || 0;
 252                 for (j = 0; j &lt; barsLen; j++) {
 253                     if (me.__excludes &amp;&amp; me.__excludes[j]) {
 254                         continue;
 255                     }
 256                     rec = record.get(bars[j]);
 257                     total[+(rec &gt; 0)][i] += mabs(rec);
 258                 }
 259             });
 260             total[+(maxY &gt; 0)].push(mabs(maxY));
 261             total[+(minY &gt; 0)].push(mabs(minY));
 262             minus = mmax.apply(math, total[0]);
 263             plus = mmax.apply(math, total[1]);
 264             scale = (column ? bbox.height - yPadding * 2 : bbox.width - xPadding * 2) / (plus + minus);
 265             zero = zero + minus * scale * (column ? -1 : 1);
 266         }
 267         else if (minY / maxY &lt; 0) {
 268             zero = zero - minY * scale * (column ? -1 : 1);
 269         }
 270         return {
 271             bars: bars,
 272             bbox: bbox,
 273             barsLen: barsLen,
 274             groupBarsLen: groupBarsLen,
 275             barWidth: barWidth,
 276             groupBarWidth: groupBarWidth,
 277             scale: scale,
 278             zero: zero,
 279             xPadding: xPadding,
 280             yPadding: yPadding,
 281             signed: minY / maxY &lt; 0,
 282             minY: minY,
 283             maxY: maxY
 284         };
 285     },
 286
 287     // @private Build an array of paths for the chart
 288     getPaths: function() {
 289         var me = this,
 290             chart = me.chart,
 291             store = chart.substore || chart.store,
 292             bounds = me.bounds = me.getBounds(),
 293             items = me.items = [],
 294             gutter = me.gutter / 100,
 295             groupGutter = me.groupGutter / 100,
 296             animate = chart.animate,
 297             column = me.column,
 298             group = me.group,
 299             enableShadows = chart.shadow,
 300             shadowGroups = me.shadowGroups,
 301             shadowAttributes = me.shadowAttributes,
 302             shadowGroupsLn = shadowGroups.length,
 303             bbox = bounds.bbox,
 304             xPadding = me.xPadding,
 305             yPadding = me.yPadding,
 306             stacked = me.stacked,
 307             barsLen = bounds.barsLen,
 308             colors = me.colorArrayStyle,
 309             colorLength = colors &amp;&amp; colors.length || 0,
 310             math = Math,
 311             mmax = math.max,
 312             mmin = math.min,
 313             mabs = math.abs,
 314             j, yValue, height, totalDim, totalNegDim, bottom, top, hasShadow, barAttr, attrs, counter,
 315             shadowIndex, shadow, sprite, offset, floorY;
 316
 317         store.each(function(record, i, total) {
 318             bottom = bounds.zero;
 319             top = bounds.zero;
 320             totalDim = 0;
 321             totalNegDim = 0;
 322             hasShadow = false;
 323             for (j = 0, counter = 0; j &lt; barsLen; j++) {
 324                 // Excluded series
 325                 if (me.__excludes &amp;&amp; me.__excludes[j]) {
 326                     continue;
 327                 }
 328                 yValue = record.get(bounds.bars[j]);
 329                 height = Math.round((yValue - ((bounds.minY &lt; 0) ? 0 : bounds.minY)) * bounds.scale);
 330                 barAttr = {
 331                     fill: colors[(barsLen &gt; 1 ? j : 0) % colorLength]
 332                 };
 333                 if (column) {
 334                     Ext.apply(barAttr, {
 335                         height: height,
 336                         width: mmax(bounds.groupBarWidth, 0),
 337                         x: (bbox.x + xPadding + i * bounds.barWidth * (1 + gutter) + counter * bounds.groupBarWidth * (1 + groupGutter) * !stacked),
 338                         y: bottom - height
 339                     });
 340                 }
 341                 else {
 342                     // draw in reverse order
 343                     offset = (total - 1) - i;
 344                     Ext.apply(barAttr, {
 345                         height: mmax(bounds.groupBarWidth, 0),
 346                         width: height + (bottom == bounds.zero),
 347                         x: bottom + (bottom != bounds.zero),
 348                         y: (bbox.y + yPadding + offset * bounds.barWidth * (1 + gutter) + counter * bounds.groupBarWidth * (1 + groupGutter) * !stacked + 1)
 349                     });
 350                 }
 351                 if (height &lt; 0) {
 352                     if (column) {
 353                         barAttr.y = top;
 354                         barAttr.height = mabs(height);
 355                     } else {
 356                         barAttr.x = top + height;
 357                         barAttr.width = mabs(height);
 358                     }
 359                 }
 360                 if (stacked) {
 361                     if (height &lt; 0) {
 362                         top += height * (column ? -1 : 1);
 363                     } else {
 364                         bottom += height * (column ? -1 : 1);
 365                     }
 366                     totalDim += mabs(height);
 367                     if (height &lt; 0) {
 368                         totalNegDim += mabs(height);
 369                     }
 370                 }
 371                 barAttr.x = Math.floor(barAttr.x) + 1;
 372                 floorY = Math.floor(barAttr.y);
 373                 if (!Ext.isIE9 &amp;&amp; barAttr.y &gt; floorY) {
 374                     floorY--;
 375                 }
 376                 barAttr.y = floorY;
 377                 barAttr.width = Math.floor(barAttr.width);
 378                 barAttr.height = Math.floor(barAttr.height);
 379                 items.push({
 380                     series: me,
 381                     storeItem: record,
 382                     value: [record.get(me.xField), yValue],
 383                     attr: barAttr,
 384                     point: column ? [barAttr.x + barAttr.width / 2, yValue &gt;= 0 ? barAttr.y : barAttr.y + barAttr.height] :
 385                                     [yValue &gt;= 0 ? barAttr.x + barAttr.width : barAttr.x, barAttr.y + barAttr.height / 2]
 386                 });
 387                 // When resizing, reset before animating
 388                 if (animate &amp;&amp; chart.resizing) {
 389                     attrs = column ? {
 390                         x: barAttr.x,
 391                         y: bounds.zero,
 392                         width: barAttr.width,
 393                         height: 0
 394                     } : {
 395                         x: bounds.zero,
 396                         y: barAttr.y,
 397                         width: 0,
 398                         height: barAttr.height
 399                     };
 400                     if (enableShadows &amp;&amp; (stacked &amp;&amp; !hasShadow || !stacked)) {
 401                         hasShadow = true;
 402                         //update shadows
 403                         for (shadowIndex = 0; shadowIndex &lt; shadowGroupsLn; shadowIndex++) {
 404                             shadow = shadowGroups[shadowIndex].getAt(stacked ? i : (i * barsLen + j));
 405                             if (shadow) {
 406                                 shadow.setAttributes(attrs, true);
 407                             }
 408                         }
 409                     }
 410                     //update sprite position and width/height
 411                     sprite = group.getAt(i * barsLen + j);
 412                     if (sprite) {
 413                         sprite.setAttributes(attrs, true);
 414                     }
 415                 }
 416                 counter++;
 417             }
 418             if (stacked &amp;&amp; items.length) {
 419                 items[i * counter].totalDim = totalDim;
 420                 items[i * counter].totalNegDim = totalNegDim;
 421             }
 422         }, me);
 423     },
 424
 425     // @private render/setAttributes on the shadows
 426     renderShadows: function(i, barAttr, baseAttrs, bounds) {
 427         var me = this,
 428             chart = me.chart,
 429             surface = chart.surface,
 430             animate = chart.animate,
 431             stacked = me.stacked,
 432             shadowGroups = me.shadowGroups,
 433             shadowAttributes = me.shadowAttributes,
 434             shadowGroupsLn = shadowGroups.length,
 435             store = chart.substore || chart.store,
 436             column = me.column,
 437             items = me.items,
 438             shadows = [],
 439             zero = bounds.zero,
 440             shadowIndex, shadowBarAttr, shadow, totalDim, totalNegDim, j, rendererAttributes;
 441
 442         if ((stacked &amp;&amp; (i % bounds.groupBarsLen === 0)) || !stacked) {
 443             j = i / bounds.groupBarsLen;
 444             //create shadows
 445             for (shadowIndex = 0; shadowIndex &lt; shadowGroupsLn; shadowIndex++) {
 446                 shadowBarAttr = Ext.apply({}, shadowAttributes[shadowIndex]);
 447                 shadow = shadowGroups[shadowIndex].getAt(stacked ? j : i);
 448                 Ext.copyTo(shadowBarAttr, barAttr, 'x,y,width,height');
 449                 if (!shadow) {
 450                     shadow = surface.add(Ext.apply({
 451                         type: 'rect',
 452                         group: shadowGroups[shadowIndex]
 453                     }, Ext.apply({}, baseAttrs, shadowBarAttr)));
 454                 }
 455                 if (stacked) {
 456                     totalDim = items[i].totalDim;
 457                     totalNegDim = items[i].totalNegDim;
 458                     if (column) {
 459                         shadowBarAttr.y = zero - totalNegDim;
 460                         shadowBarAttr.height = totalDim;
 461                     }
 462                     else {
 463                         shadowBarAttr.x = zero - totalNegDim;
 464                         shadowBarAttr.width = totalDim;
 465                     }
 466                 }
 467                 if (animate) {
 468                     if (!stacked) {
 469                         rendererAttributes = me.renderer(shadow, store.getAt(j), shadowBarAttr, i, store);
 470                         me.onAnimate(shadow, { to: rendererAttributes });
 471                     }
 472                     else {
 473                         rendererAttributes = me.renderer(shadow, store.getAt(j), Ext.apply(shadowBarAttr, { hidden: true }), i, store);
 474                         shadow.setAttributes(rendererAttributes, true);
 475                     }
 476                 }
 477                 else {
 478                     rendererAttributes = me.renderer(shadow, store.getAt(j), Ext.apply(shadowBarAttr, { hidden: false }), i, store);
 479                     shadow.setAttributes(rendererAttributes, true);
 480                 }
 481                 shadows.push(shadow);
 482             }
 483         }
 484         return shadows;
 485     },
 486
 487 <span id='Ext-chart.series.Bar-method-drawSeries'>    /**
 488 </span>     * Draws the series for the current chart.
 489      */
 490     drawSeries: function() {
 491         var me = this,
 492             chart = me.chart,
 493             store = chart.substore || chart.store,
 494             surface = chart.surface,
 495             animate = chart.animate,
 496             stacked = me.stacked,
 497             column = me.column,
 498             enableShadows = chart.shadow,
 499             shadowGroups = me.shadowGroups,
 500             shadowGroupsLn = shadowGroups.length,
 501             group = me.group,
 502             seriesStyle = me.seriesStyle,
 503             items, ln, i, j, baseAttrs, sprite, rendererAttributes, shadowIndex, shadowGroup,
 504             bounds, endSeriesStyle, barAttr, attrs, anim;
 505
 506         if (!store || !store.getCount()) {
 507             return;
 508         }
 509
 510         //fill colors are taken from the colors array.
 511         delete seriesStyle.fill;
 512         endSeriesStyle = Ext.apply(seriesStyle, this.style);
 513         me.unHighlightItem();
 514         me.cleanHighlights();
 515
 516         me.getPaths();
 517         bounds = me.bounds;
 518         items = me.items;
 519
 520         baseAttrs = column ? {
 521             y: bounds.zero,
 522             height: 0
 523         } : {
 524             x: bounds.zero,
 525             width: 0
 526         };
 527         ln = items.length;
 528         // Create new or reuse sprites and animate/display
 529         for (i = 0; i &lt; ln; i++) {
 530             sprite = group.getAt(i);
 531             barAttr = items[i].attr;
 532
 533             if (enableShadows) {
 534                 items[i].shadows = me.renderShadows(i, barAttr, baseAttrs, bounds);
 535             }
 536
 537             // Create a new sprite if needed (no height)
 538             if (!sprite) {
 539                 attrs = Ext.apply({}, baseAttrs, barAttr);
 540                 attrs = Ext.apply(attrs, endSeriesStyle || {});
 541                 sprite = surface.add(Ext.apply({}, {
 542                     type: 'rect',
 543                     group: group
 544                 }, attrs));
 545             }
 546             if (animate) {
 547                 rendererAttributes = me.renderer(sprite, store.getAt(i), barAttr, i, store);
 548                 sprite._to = rendererAttributes;
 549                 anim = me.onAnimate(sprite, { to: Ext.apply(rendererAttributes, endSeriesStyle) });
 550                 if (enableShadows &amp;&amp; stacked &amp;&amp; (i % bounds.barsLen === 0)) {
 551                     j = i / bounds.barsLen;
 552                     for (shadowIndex = 0; shadowIndex &lt; shadowGroupsLn; shadowIndex++) {
 553                         anim.on('afteranimate', function() {
 554                             this.show(true);
 555                         }, shadowGroups[shadowIndex].getAt(j));
 556                     }
 557                 }
 558             }
 559             else {
 560                 rendererAttributes = me.renderer(sprite, store.getAt(i), Ext.apply(barAttr, { hidden: false }), i, store);
 561                 sprite.setAttributes(Ext.apply(rendererAttributes, endSeriesStyle), true);
 562             }
 563             items[i].sprite = sprite;
 564         }
 565
 566         // Hide unused sprites
 567         ln = group.getCount();
 568         for (j = i; j &lt; ln; j++) {
 569             group.getAt(j).hide(true);
 570         }
 571         // Hide unused shadows
 572         if (enableShadows) {
 573             for (shadowIndex = 0; shadowIndex &lt; shadowGroupsLn; shadowIndex++) {
 574                 shadowGroup = shadowGroups[shadowIndex];
 575                 ln = shadowGroup.getCount();
 576                 for (j = i; j &lt; ln; j++) {
 577                     shadowGroup.getAt(j).hide(true);
 578                 }
 579             }
 580         }
 581         me.renderLabels();
 582     },
 583
 584     // @private handled when creating a label.
 585     onCreateLabel: function(storeItem, item, i, display) {
 586         var me = this,
 587             surface = me.chart.surface,
 588             group = me.labelsGroup,
 589             config = me.label,
 590             endLabelStyle = Ext.apply({}, config, me.seriesLabelStyle || {}),
 591             sprite;
 592         return surface.add(Ext.apply({
 593             type: 'text',
 594             group: group
 595         }, endLabelStyle || {}));
 596     },
 597
 598     // @private callback used when placing a label.
 599     onPlaceLabel: function(label, storeItem, item, i, display, animate, index) {
 600         // Determine the label's final position. Starts with the configured preferred value but
 601         // may get flipped from inside to outside or vice-versa depending on space.
 602         var me = this,
 603             opt = me.bounds,
 604             groupBarWidth = opt.groupBarWidth,
 605             column = me.column,
 606             chart = me.chart,
 607             chartBBox = chart.chartBBox,
 608             resizing = chart.resizing,
 609             xValue = item.value[0],
 610             yValue = item.value[1],
 611             attr = item.attr,
 612             config = me.label,
 613             rotate = config.orientation == 'vertical',
 614             field = [].concat(config.field),
 615             format = config.renderer,
 616             text = format(storeItem.get(field[index])),
 617             size = me.getLabelSize(text),
 618             width = size.width,
 619             height = size.height,
 620             zero = opt.zero,
 621             outside = 'outside',
 622             insideStart = 'insideStart',
 623             insideEnd = 'insideEnd',
 624             offsetX = 10,
 625             offsetY = 6,
 626             signed = opt.signed,
 627             x, y, finalAttr;
 628
 629         label.setAttributes({
 630             text: text
 631         });
 632
 633         if (column) {
 634             if (display == outside) {
 635                 if (height + offsetY + attr.height &gt; (yValue &gt;= 0 ? zero - chartBBox.y : chartBBox.y + chartBBox.height - zero)) {
 636                     display = insideEnd;
 637                 }
 638             } else {
 639                 if (height + offsetY &gt; attr.height) {
 640                     display = outside;
 641                 }
 642             }
 643             x = attr.x + groupBarWidth / 2;
 644             y = display == insideStart ?
 645                     (zero + ((height / 2 + 3) * (yValue &gt;= 0 ? -1 : 1))) :
 646                     (yValue &gt;= 0 ? (attr.y + ((height / 2 + 3) * (display == outside ? -1 : 1))) :
 647                                    (attr.y + attr.height + ((height / 2 + 3) * (display === outside ? 1 : -1))));
 648         }
 649         else {
 650             if (display == outside) {
 651                 if (width + offsetX + attr.width &gt; (yValue &gt;= 0 ? chartBBox.x + chartBBox.width - zero : zero - chartBBox.x)) {
 652                     display = insideEnd;
 653                 }
 654             }
 655             else {
 656                 if (width + offsetX &gt; attr.width) {
 657                     display = outside;
 658                 }
 659             }
 660             x = display == insideStart ?
 661                 (zero + ((width / 2 + 5) * (yValue &gt;= 0 ? 1 : -1))) :
 662                 (yValue &gt;= 0 ? (attr.x + attr.width + ((width / 2 + 5) * (display === outside ? 1 : -1))) :
 663                 (attr.x + ((width / 2 + 5) * (display === outside ? -1 : 1))));
 664             y = attr.y + groupBarWidth / 2;
 665         }
 666         //set position
 667         finalAttr = {
 668             x: x,
 669             y: y
 670         };
 671         //rotate
 672         if (rotate) {
 673             finalAttr.rotate = {
 674                 x: x,
 675                 y: y,
 676                 degrees: 270
 677             };
 678         }
 679         //check for resizing
 680         if (animate &amp;&amp; resizing) {
 681             if (column) {
 682                 x = attr.x + attr.width / 2;
 683                 y = zero;
 684             } else {
 685                 x = zero;
 686                 y = attr.y + attr.height / 2;
 687             }
 688             label.setAttributes({
 689                 x: x,
 690                 y: y
 691             }, true);
 692             if (rotate) {
 693                 label.setAttributes({
 694                     rotate: {
 695                         x: x,
 696                         y: y,
 697                         degrees: 270
 698                     }
 699                 }, true);
 700             }
 701         }
 702         //handle animation
 703         if (animate) {
 704             me.onAnimate(label, { to: finalAttr });
 705         }
 706         else {
 707             label.setAttributes(Ext.apply(finalAttr, {
 708                 hidden: false
 709             }), true);
 710         }
 711     },
 712
 713     /* @private
 714      * Gets the dimensions of a given bar label. Uses a single hidden sprite to avoid
 715      * changing visible sprites.
 716      * @param value
 717      */
 718     getLabelSize: function(value) {
 719         var tester = this.testerLabel,
 720             config = this.label,
 721             endLabelStyle = Ext.apply({}, config, this.seriesLabelStyle || {}),
 722             rotated = config.orientation === 'vertical',
 723             bbox, w, h,
 724             undef;
 725         if (!tester) {
 726             tester = this.testerLabel = this.chart.surface.add(Ext.apply({
 727                 type: 'text',
 728                 opacity: 0
 729             }, endLabelStyle));
 730         }
 731         tester.setAttributes({
 732             text: value
 733         }, true);
 734
 735         // Flip the width/height if rotated, as getBBox returns the pre-rotated dimensions
 736         bbox = tester.getBBox();
 737         w = bbox.width;
 738         h = bbox.height;
 739         return {
 740             width: rotated ? h : w,
 741             height: rotated ? w : h
 742         };
 743     },
 744
 745     // @private used to animate label, markers and other sprites.
 746     onAnimate: function(sprite, attr) {
 747         sprite.show();
 748         return this.callParent(arguments);
 749     },
 750
 751     isItemInPoint: function(x, y, item) {
 752         var bbox = item.sprite.getBBox();
 753         return bbox.x &lt;= x &amp;&amp; bbox.y &lt;= y
 754             &amp;&amp; (bbox.x + bbox.width) &gt;= x
 755             &amp;&amp; (bbox.y + bbox.height) &gt;= y;
 756     },
 757
 758     // @private hide all markers
 759     hideAll: function() {
 760         var axes = this.chart.axes;
 761         if (!isNaN(this._index)) {
 762             if (!this.__excludes) {
 763                 this.__excludes = [];
 764             }
 765             this.__excludes[this._index] = true;
 766             this.drawSeries();
 767             axes.each(function(axis) {
 768                 axis.drawAxis();
 769             });
 770         }
 771     },
 772
 773     // @private show all markers
 774     showAll: function() {
 775         var axes = this.chart.axes;
 776         if (!isNaN(this._index)) {
 777             if (!this.__excludes) {
 778                 this.__excludes = [];
 779             }
 780             this.__excludes[this._index] = false;
 781             this.drawSeries();
 782             axes.each(function(axis) {
 783                 axis.drawAxis();
 784             });
 785         }
 786     },
 787
 788 <span id='Ext-chart.series.Bar-method-getLegendColor'>    /**
 789 </span>     * Returns a string with the color to be used for the series legend item.
 790      * @param index
 791      */
 792     getLegendColor: function(index) {
 793         var me = this;
 794         return me.colorArrayStyle[index % me.colorArrayStyle.length];
 795     }
 796 });</pre></pre></body></html>