docs/source/Bar2.html

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