    /**
     * Creates a Bar Chart. A Bar Chart is a useful visualization technique to display quantitative information for
     * different categories that can show some progression (or regression) in the dataset. As with all other series, the Bar
     * Series must be appended in the *series* Chart array configuration. See the Chart documentation for more information.
     * A typical configuration object for the bar series could be:
     *
     *     @example
     *     var store = Ext.create('Ext.data.JsonStore', {
     *         fields: ['name', 'data'],
     *         data: [
     *             { 'name': 'metric one',   'data':10 },
     *             { 'name': 'metric two',   'data': 7 },
     *             { 'name': 'metric three', 'data': 5 },
     *             { 'name': 'metric four',  'data': 2 },
     *             { 'name': 'metric five',  'data':27 }
     *         ]
     *     });
     *
     *     Ext.create('Ext.chart.Chart', {
     *         renderTo: Ext.getBody(),
     *         width: 500,
     *         height: 300,
     *         animate: true,
     *         store: store,
     *         axes: [{
     *             type: 'Numeric',
     *             position: 'bottom',
     *             fields: ['data'],
     *             label: {
     *                 renderer: Ext.util.Format.numberRenderer('0,0')
     *             },
     *             title: 'Sample Values',
     *             grid: true,
     *             minimum: 0
     *         }, {
     *             type: 'Category',
     *             position: 'left',
     *             fields: ['name'],
     *             title: 'Sample Metrics'
     *         }],
     *         series: [{
     *             type: 'bar',
     *             axis: 'bottom',
     *             highlight: true,
     *             tips: {
     *               trackMouse: true,
     *               width: 140,
     *               height: 28,
     *               renderer: function(storeItem, item) {
     *                 this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
     *               }
     *             },
     *             label: {
     *               display: 'insideEnd',
     *                 field: 'data',
     *                 renderer: Ext.util.Format.numberRenderer('0'),
     *                 orientation: 'horizontal',
     *                 color: '#333',
     *                 'text-anchor': 'middle'
     *             },
     *             xField: 'name',
     *             yField: 'data'
     *         }]
     *     });
     *
     * In this configuration we set `bar` as the series type, bind the values of the bar to the bottom axis and set the
     * xField or category field to the `name` parameter of the store. We also set `highlight` to true which enables smooth
     * animations when bars are hovered. We also set some configuration for the bar labels to be displayed inside the bar,
     * to display the information found in the `data1` property of each element store, to render a formated text with the
     * `Ext.util.Format` we pass in, to have an `horizontal` orientation (as opposed to a vertical one) and we also set
     * other styles like `color`, `text-anchor`, etc.
     */
    Ext.define('Ext.chart.series.Bar', {

        /* Begin Definitions */

        extend: 'Ext.chart.series.Cartesian',

        alternateClassName: ['Ext.chart.BarSeries', 'Ext.chart.BarChart', 'Ext.chart.StackedBarChart'],

        requires: ['Ext.chart.axis.Axis', 'Ext.fx.Anim'],

        /* End Definitions */

        type: 'bar',

        alias: 'series.bar',
        /**
         * @cfg {Boolean} column Whether to set the visualization as column chart or horizontal bar chart.
         */
        column: false,

        /**
         * @cfg style Style properties that will override the theming series styles.
         */
        style: {},

        /**
         * @cfg {Number} gutter The gutter space between single bars, as a percentage of the bar width
         */
        gutter: 38.2,

        /**
         * @cfg {Number} groupGutter The gutter space between groups of bars, as a percentage of the bar width
         */
        groupGutter: 38.2,

        /**
         * @cfg {Number} xPadding Padding between the left/right axes and the bars
         */
        xPadding: 0,

        /**
         * @cfg {Number} yPadding Padding between the top/bottom axes and the bars
         */
        yPadding: 10,

        constructor: function(config) {
            this.callParent(arguments);
            var me = this,
                surface = me.chart.surface,
                shadow = me.chart.shadow,
                i, l;
            config.highlightCfg = Ext.Object.merge({
                lineWidth: 3,
                stroke: '#55c',
                opacity: 0.8,
                color: '#f00'
            }, config.highlightCfg);
            Ext.apply(me, config, {
                shadowAttributes: [{
                    "stroke-width": 6,
                    "stroke-opacity": 0.05,
                    stroke: 'rgb(200, 200, 200)',
                    translate: {
                        x: 1.2,
                        y: 1.2
                    }
                }, {
                    "stroke-width": 4,
                    "stroke-opacity": 0.1,
                    stroke: 'rgb(150, 150, 150)',
                    translate: {
                        x: 0.9,
                        y: 0.9
                    }
                }, {
                    "stroke-width": 2,
                    "stroke-opacity": 0.15,
                    stroke: 'rgb(100, 100, 100)',
                    translate: {
                        x: 0.6,
                        y: 0.6
                    }
                }]
            });

            me.group = surface.getGroup(me.seriesId + '-bars');
            if (shadow) {
                for (i = 0, l = me.shadowAttributes.length; i < l; i++) {
                    me.shadowGroups.push(surface.getGroup(me.seriesId + '-shadows' + i));
                }
            }
        },

        // @private sets the bar girth.
        getBarGirth: function() {
            var me = this,
                store = me.chart.getChartStore(),
                column = me.column,
                ln = store.getCount(),
                gutter = me.gutter / 100;

            return (me.chart.chartBBox[column ? 'width' : 'height'] - me[column ? 'xPadding' : 'yPadding'] * 2) / (ln * (gutter + 1) - gutter);
        },

        // @private returns the gutters.
        getGutters: function() {
            var me = this,
                column = me.column,
                gutter = Math.ceil(me[column ? 'xPadding' : 'yPadding'] + me.getBarGirth() / 2);
            return me.column ? [gutter, 0] : [0, gutter];
        },

        // @private Get chart and data boundaries
        getBounds: function() {
            var me = this,
                chart = me.chart,
                store = chart.getChartStore(),
                data = store.data.items,
                i, ln, record,
                bars = [].concat(me.yField),
                barsLen = bars.length,
                groupBarsLen = barsLen,
                groupGutter = me.groupGutter / 100,
                column = me.column,
                xPadding = me.xPadding,
                yPadding = me.yPadding,
                stacked = me.stacked,
                barWidth = me.getBarGirth(),
                barWidthProperty = column ? 'width' : 'height',
                math = Math,
                mmin = math.min,
                mmax = math.max,
                mabs = math.abs,
                boundAxes = me.getAxesForXAndYFields(),
                boundYAxis = boundAxes.yAxis,
                ends, shrunkBarWidth, groupBarWidth, bbox, minY, maxY, axis, out,
                scale, zero, total, rec, j, plus, minus;

            me.setBBox(true);
            bbox = me.bbox;

            //Skip excluded series
            if (me.__excludes) {
                for (j = 0, total = me.__excludes.length; j < total; j++) {
                    if (me.__excludes[j]) {
                        groupBarsLen--;
                    }
                }
            }
            axis = chart.axes.get(boundYAxis);
            if (axis) {
                ends = axis.applyData();
                minY = ends.from;
                maxY = ends.to;
            }

            if (me.yField && !Ext.isNumber(minY)) {
                out = me.getMinMaxYValues();
                minY = out[0];
                maxY = out[1];
            }

            if (!Ext.isNumber(minY)) {
                minY = 0;
            }
            if (!Ext.isNumber(maxY)) {
                maxY = 0;
            }
            scale = (column ? bbox.height - yPadding * 2 : bbox.width - xPadding * 2) / (maxY - minY);
            shrunkBarWidth = barWidth;
            groupBarWidth = (barWidth / ((stacked ? 1 : groupBarsLen) * (groupGutter + 1) - groupGutter));

            if (barWidthProperty in me.style) {
                groupBarWidth = mmin(groupBarWidth, me.style[barWidthProperty]);
                shrunkBarWidth = groupBarWidth * ((stacked ? 1 : groupBarsLen) * (groupGutter + 1) - groupGutter);
            }
            zero = (column) ? bbox.y + bbox.height - yPadding : bbox.x + xPadding;

            if (stacked) {
                total = [[], []];
                for (i = 0, ln = data.length; i < ln; i++) {
                    record = data[i];
                    total[0][i] = total[0][i] || 0;
                    total[1][i] = total[1][i] || 0;
                    for (j = 0; j < barsLen; j++) {
                        if (me.__excludes && me.__excludes[j]) {
                            continue;
                        }
                        rec = record.get(bars[j]);
                        total[+(rec > 0)][i] += mabs(rec);
                    }
                }
                total[+(maxY > 0)].push(mabs(maxY));
                total[+(minY > 0)].push(mabs(minY));
                minus = mmax.apply(math, total[0]);
                plus = mmax.apply(math, total[1]);
                scale = (column ? bbox.height - yPadding * 2 : bbox.width - xPadding * 2) / (plus + minus);
                zero = zero + minus * scale * (column ? -1 : 1);
            }
            else if (minY / maxY < 0) {
                zero = zero - minY * scale * (column ? -1 : 1);
            }
            return {
                bars: bars,
                bbox: bbox,
                shrunkBarWidth: shrunkBarWidth,
                barsLen: barsLen,
                groupBarsLen: groupBarsLen,
                barWidth: barWidth,
                groupBarWidth: groupBarWidth,
                scale: scale,
                zero: zero,
                xPadding: xPadding,
                yPadding: yPadding,
                signed: minY / maxY < 0,
                minY: minY,
                maxY: maxY
            };
        },

        // @private Build an array of paths for the chart
        getPaths: function() {
            var me = this,
                chart = me.chart,
                store = chart.getChartStore(),
                data = store.data.items,
                i, total, record,
                bounds = me.bounds = me.getBounds(),
                items = me.items = [],
                yFields = me.yField,
                gutter = me.gutter / 100,
                groupGutter = me.groupGutter / 100,
                animate = chart.animate,
                column = me.column,
                group = me.group,
                enableShadows = chart.shadow,
                shadowGroups = me.shadowGroups,
                shadowAttributes = me.shadowAttributes,
                shadowGroupsLn = shadowGroups.length,
                bbox = bounds.bbox,
                barWidth = bounds.barWidth,
                shrunkBarWidth = bounds.shrunkBarWidth,
                xPadding = me.xPadding,
                yPadding = me.yPadding,
                stacked = me.stacked,
                barsLen = bounds.barsLen,
                colors = me.colorArrayStyle,
                colorLength = colors && colors.length || 0,
                math = Math,
                mmax = math.max,
                mmin = math.min,
                mabs = math.abs,
                j, yValue, height, totalDim, totalNegDim, bottom, top, hasShadow, barAttr, attrs, counter,
                shadowIndex, shadow, sprite, offset, floorY;

            for (i = 0, total = data.length; i < total; i++) {
                record = data[i];
                bottom = bounds.zero;
                top = bounds.zero;
                totalDim = 0;
                totalNegDim = 0;
                hasShadow = false;
                for (j = 0, counter = 0; j < barsLen; j++) {
                    // Excluded series
                    if (me.__excludes && me.__excludes[j]) {
                        continue;
                    }
                    yValue = record.get(bounds.bars[j]);
                    height = Math.round((yValue - mmax(bounds.minY, 0)) * bounds.scale);
                    barAttr = {
                        fill: colors[(barsLen > 1 ? j : 0) % colorLength]
                    };
                    if (column) {
                        Ext.apply(barAttr, {
                            height: height,
                            width: mmax(bounds.groupBarWidth, 0),
                            x: (bbox.x + xPadding + (barWidth - shrunkBarWidth) * 0.5 + i * barWidth * (1 + gutter) + counter * bounds.groupBarWidth * (1 + groupGutter) * !stacked),
                            y: bottom - height
                        });
                    }
                    else {
                        // draw in reverse order
                        offset = (total - 1) - i;
                        Ext.apply(barAttr, {
                            height: mmax(bounds.groupBarWidth, 0),
                            width: height + (bottom == bounds.zero),
                            x: bottom + (bottom != bounds.zero),
                            y: (bbox.y + yPadding + (barWidth - shrunkBarWidth) * 0.5 + offset * barWidth * (1 + gutter) + counter * bounds.groupBarWidth * (1 + groupGutter) * !stacked + 1)
                        });
                    }
                    if (height < 0) {
                        if (column) {
                            barAttr.y = top;
                            barAttr.height = mabs(height);
                        } else {
                            barAttr.x = top + height;
                            barAttr.width = mabs(height);
                        }
                    }
                    if (stacked) {
                        if (height < 0) {
                            top += height * (column ? -1 : 1);
                        } else {
                            bottom += height * (column ? -1 : 1);
                        }
                        totalDim += mabs(height);
                        if (height < 0) {
                            totalNegDim += mabs(height);
                        }
                    }
                    barAttr.x = Math.floor(barAttr.x) + 1;
                    floorY = Math.floor(barAttr.y);
                    if (!Ext.isIE9 && barAttr.y > floorY) {
                        floorY--;
                    }
                    barAttr.y = floorY;
                    barAttr.width = Math.floor(barAttr.width);
                    barAttr.height = Math.floor(barAttr.height);
                    items.push({
                        series: me,
                        yField: yFields[j],
                        storeItem: record,
                        value: [record.get(me.xField), yValue],
                        attr: barAttr,
                        point: column ? [barAttr.x + barAttr.width / 2, yValue >= 0 ? barAttr.y : barAttr.y + barAttr.height] :
                                        [yValue >= 0 ? barAttr.x + barAttr.width : barAttr.x, barAttr.y + barAttr.height / 2]
                    });
                    // When resizing, reset before animating
                    if (animate && chart.resizing) {
                        attrs = column ? {
                            x: barAttr.x,
                            y: bounds.zero,
                            width: barAttr.width,
                            height: 0
                        } : {
                            x: bounds.zero,
                            y: barAttr.y,
                            width: 0,
                            height: barAttr.height
                        };
                        if (enableShadows && (stacked && !hasShadow || !stacked)) {
                            hasShadow = true;
                            //update shadows
                            for (shadowIndex = 0; shadowIndex < shadowGroupsLn; shadowIndex++) {
                                shadow = shadowGroups[shadowIndex].getAt(stacked ? i : (i * barsLen + j));
                                if (shadow) {
                                    shadow.setAttributes(attrs, true);
                                }
                            }
                        }
                        //update sprite position and width/height
                        sprite = group.getAt(i * barsLen + j);
                        if (sprite) {
                            sprite.setAttributes(attrs, true);
                        }
                    }
                    counter++;
                }
                if (stacked && items.length) {
                    items[i * counter].totalDim = totalDim;
                    items[i * counter].totalNegDim = totalNegDim;
                }
            }
        },

        // @private render/setAttributes on the shadows
        renderShadows: function(i, barAttr, baseAttrs, bounds) {
            var me = this,
                chart = me.chart,
                surface = chart.surface,
                animate = chart.animate,
                stacked = me.stacked,
                shadowGroups = me.shadowGroups,
                shadowAttributes = me.shadowAttributes,
                shadowGroupsLn = shadowGroups.length,
                store = chart.getChartStore(),
                column = me.column,
                items = me.items,
                shadows = [],
                zero = bounds.zero,
                shadowIndex, shadowBarAttr, shadow, totalDim, totalNegDim, j, rendererAttributes;

            if ((stacked && (i % bounds.groupBarsLen === 0)) || !stacked) {
                j = i / bounds.groupBarsLen;
                //create shadows
                for (shadowIndex = 0; shadowIndex < shadowGroupsLn; shadowIndex++) {
                    shadowBarAttr = Ext.apply({}, shadowAttributes[shadowIndex]);
                    shadow = shadowGroups[shadowIndex].getAt(stacked ? j : i);
                    Ext.copyTo(shadowBarAttr, barAttr, 'x,y,width,height');
                    if (!shadow) {
                        shadow = surface.add(Ext.apply({
                            type: 'rect',
                            group: shadowGroups[shadowIndex]
                        }, Ext.apply({}, baseAttrs, shadowBarAttr)));
                    }
                    if (stacked) {
                        totalDim = items[i].totalDim;
                        totalNegDim = items[i].totalNegDim;
                        if (column) {
                            shadowBarAttr.y = zero + totalNegDim - totalDim - 1;
                            shadowBarAttr.height = totalDim;
                        }
                        else {
                            shadowBarAttr.x = zero - totalNegDim;
                            shadowBarAttr.width = totalDim;
                        }
                    }

                    rendererAttributes = me.renderer(shadow, store.getAt(j), shadowBarAttr, i, store);
                    rendererAttributes.hidden = !!barAttr.hidden;
                    if (animate) {
                        me.onAnimate(shadow, { to: rendererAttributes });
                    }
                    else {
                        shadow.setAttributes(rendererAttributes, true);
                    }
                    shadows.push(shadow);
                }
            }
            return shadows;
        },

        /**
         * Draws the series for the current chart.
         */
        drawSeries: function() {
            var me = this,
                chart = me.chart,
                store = chart.getChartStore(),
                surface = chart.surface,
                animate = chart.animate,
                stacked = me.stacked,
                column = me.column,
                enableShadows = chart.shadow,
                shadowGroups = me.shadowGroups,
                shadowGroupsLn = shadowGroups.length,
                group = me.group,
                seriesStyle = me.seriesStyle,
                items, ln, i, j, baseAttrs, sprite, rendererAttributes, shadowIndex, shadowGroup,
                bounds, endSeriesStyle, barAttr, attrs, anim;

            if (!store || !store.getCount() || me.seriesIsHidden) {
                me.hide();
                me.items = [];
                return;
            }

            //fill colors are taken from the colors array.
            endSeriesStyle = Ext.apply({}, this.style, seriesStyle);
            delete endSeriesStyle.fill;
            delete endSeriesStyle.x;
            delete endSeriesStyle.y;
            delete endSeriesStyle.width;
            delete endSeriesStyle.height;

            me.unHighlightItem();
            me.cleanHighlights();

            me.getPaths();
            bounds = me.bounds;
            items = me.items;

            baseAttrs = column ? {
                y: bounds.zero,
                height: 0
            } : {
                x: bounds.zero,
                width: 0
            };
            ln = items.length;
            // Create new or reuse sprites and animate/display
            for (i = 0; i < ln; i++) {
                sprite = group.getAt(i);
                barAttr = items[i].attr;

                if (enableShadows) {
                    items[i].shadows = me.renderShadows(i, barAttr, baseAttrs, bounds);
                }

                // Create a new sprite if needed (no height)
                if (!sprite) {
                    attrs = Ext.apply({}, baseAttrs, barAttr);
                    attrs = Ext.apply(attrs, endSeriesStyle || {});
                    sprite = surface.add(Ext.apply({}, {
                        type: 'rect',
                        group: group
                    }, attrs));
                }
                if (animate) {
                    rendererAttributes = me.renderer(sprite, store.getAt(i), barAttr, i, store);
                    sprite._to = rendererAttributes;
                    anim = me.onAnimate(sprite, { to: Ext.apply(rendererAttributes, endSeriesStyle) });
                    if (enableShadows && stacked && (i % bounds.barsLen === 0)) {
                        j = i / bounds.barsLen;
                        for (shadowIndex = 0; shadowIndex < shadowGroupsLn; shadowIndex++) {
                            anim.on('afteranimate', function() {
                                this.show(true);
                            }, shadowGroups[shadowIndex].getAt(j));
                        }
                    }
                }
                else {
                    rendererAttributes = me.renderer(sprite, store.getAt(i), Ext.apply(barAttr, { hidden: false }), i, store);
                    sprite.setAttributes(Ext.apply(rendererAttributes, endSeriesStyle), true);
                }
                items[i].sprite = sprite;
            }

            // Hide unused sprites
            ln = group.getCount();
            for (j = i; j < ln; j++) {
                group.getAt(j).hide(true);
            }

            if (me.stacked) {
                // If stacked, we have only store.getCount() shadows.
                i = store.getCount();
            }

            // Hide unused shadows
            if (enableShadows) {
                for (shadowIndex = 0; shadowIndex < shadowGroupsLn; shadowIndex++) {
                    shadowGroup = shadowGroups[shadowIndex];
                    ln = shadowGroup.getCount();
                    for (j = i; j < ln; j++) {
                        shadowGroup.getAt(j).hide(true);
                    }
                }
            }
            me.renderLabels();
        },

        // @private handled when creating a label.
        onCreateLabel: function(storeItem, item, i, display) {
            var me = this,
                surface = me.chart.surface,
                group = me.labelsGroup,
                config = me.label,
                endLabelStyle = Ext.apply({}, config, me.seriesLabelStyle || {}),
                sprite;
            return surface.add(Ext.apply({
                type: 'text',
                group: group
            }, endLabelStyle || {}));
        },

        // @private callback used when placing a label.
        onPlaceLabel: function(label, storeItem, item, i, display, animate, j, index) {
            // Determine the label's final position. Starts with the configured preferred value but
            // may get flipped from inside to outside or vice-versa depending on space.
            var me = this,
                opt = me.bounds,
                groupBarWidth = opt.groupBarWidth,
                column = me.column,
                chart = me.chart,
                chartBBox = chart.chartBBox,
                resizing = chart.resizing,
                xValue = item.value[0],
                yValue = item.value[1],
                attr = item.attr,
                config = me.label,
                rotate = config.orientation == 'vertical',
                field = [].concat(config.field),
                format = config.renderer,
                text = format(storeItem.get(field[index])),
                size = me.getLabelSize(text),
                width = size.width,
                height = size.height,
                zero = opt.zero,
                outside = 'outside',
                insideStart = 'insideStart',
                insideEnd = 'insideEnd',
                offsetX = 10,
                offsetY = 6,
                signed = opt.signed,
                x, y, finalAttr;

            label.setAttributes({
                text: text
            });

            label.isOutside = false;
            if (column) {
                if (display == outside) {
                    if (height + offsetY + attr.height > (yValue >= 0 ? zero - chartBBox.y : chartBBox.y + chartBBox.height - zero)) {
                        display = insideEnd;
                    }
                } else {
                    if (height + offsetY > attr.height) {
                        display = outside;
                        label.isOutside = true;
                    }
                }
                x = attr.x + groupBarWidth / 2;
                y = display == insideStart ?
                        (zero + ((height / 2 + 3) * (yValue >= 0 ? -1 : 1))) :
                        (yValue >= 0 ? (attr.y + ((height / 2 + 3) * (display == outside ? -1 : 1))) :
                                       (attr.y + attr.height + ((height / 2 + 3) * (display === outside ? 1 : -1))));
            }
            else {
                if (display == outside) {
                    if (width + offsetX + attr.width > (yValue >= 0 ? chartBBox.x + chartBBox.width - zero : zero - chartBBox.x)) {
                        display = insideEnd;
                    }
                }
                else {
                    if (width + offsetX > attr.width) {
                        display = outside;
                        label.isOutside = true;
                    }
                }
                x = display == insideStart ?
                    (zero + ((width / 2 + 5) * (yValue >= 0 ? 1 : -1))) :
                    (yValue >= 0 ? (attr.x + attr.width + ((width / 2 + 5) * (display === outside ? 1 : -1))) :
                    (attr.x + ((width / 2 + 5) * (display === outside ? -1 : 1))));
                y = attr.y + groupBarWidth / 2;
            }
            //set position
            finalAttr = {
                x: x,
                y: y
            };
            //rotate
            if (rotate) {
                finalAttr.rotate = {
                    x: x,
                    y: y,
                    degrees: 270
                };
            }
            //check for resizing
            if (animate && resizing) {
                if (column) {
                    x = attr.x + attr.width / 2;
                    y = zero;
                } else {
                    x = zero;
                    y = attr.y + attr.height / 2;
                }
                label.setAttributes({
                    x: x,
                    y: y
                }, true);
                if (rotate) {
                    label.setAttributes({
                        rotate: {
                            x: x,
                            y: y,
                            degrees: 270
                        }
                    }, true);
                }
            }
            //handle animation
            if (animate) {
                me.onAnimate(label, { to: finalAttr });
            }
            else {
                label.setAttributes(Ext.apply(finalAttr, {
                    hidden: false
                }), true);
            }
        },

        /* @private
         * Gets the dimensions of a given bar label. Uses a single hidden sprite to avoid
         * changing visible sprites.
         * @param value
         */
        getLabelSize: function(value) {
            var tester = this.testerLabel,
                config = this.label,
                endLabelStyle = Ext.apply({}, config, this.seriesLabelStyle || {}),
                rotated = config.orientation === 'vertical',
                bbox, w, h,
                undef;
            if (!tester) {
                tester = this.testerLabel = this.chart.surface.add(Ext.apply({
                    type: 'text',
                    opacity: 0
                }, endLabelStyle));
            }
            tester.setAttributes({
                text: value
            }, true);

            // Flip the width/height if rotated, as getBBox returns the pre-rotated dimensions
            bbox = tester.getBBox();
            w = bbox.width;
            h = bbox.height;
            return {
                width: rotated ? h : w,
                height: rotated ? w : h
            };
        },

        // @private used to animate label, markers and other sprites.
        onAnimate: function(sprite, attr) {
            sprite.show();
            return this.callParent(arguments);
        },

        isItemInPoint: function(x, y, item) {
            var bbox = item.sprite.getBBox();
            return bbox.x <= x && bbox.y <= y
                && (bbox.x + bbox.width) >= x
                && (bbox.y + bbox.height) >= y;
        },

        // @private hide all markers
        hideAll: function(index) {
            var axes      = this.chart.axes,
                axesItems = axes.items,
                ln        = axesItems.length,
                i         = 0;

            index = (isNaN(this._index) ? index : this._index) || 0;

            if (!this.__excludes) {
                this.__excludes = [];
            }

            this.__excludes[index] = true;
            this.drawSeries();

            for (i; i < ln; i++) {
                axesItems[i].drawAxis();
            }
        },

        // @private show all markers
        showAll: function(index) {
            var axes = this.chart.axes,
                axesItems = axes.items,
                ln        = axesItems.length,
                i         = 0;

            index = (isNaN(this._index) ? index : this._index) || 0;

            if (!this.__excludes) {
                this.__excludes = [];
            }

            this.__excludes[index] = false;
            this.drawSeries();

            for (i; i < ln; i++) {
                axesItems[i].drawAxis();
            }
        },

        /**
         * Returns a string with the color to be used for the series legend item.
         * @param index
         */
        getLegendColor: function(index) {
            var me = this,
                colorLength = me.colorArrayStyle.length;

            if (me.style && me.style.fill) {
                return me.style.fill;
            } else {
                return me.colorArrayStyle[index % colorLength];
            }
        },

        highlightItem: function(item) {
            this.callParent(arguments);
            this.renderLabels();
        },

        unHighlightItem: function() {
            this.callParent(arguments);
            this.renderLabels();
        },

        cleanHighlights: function() {
            this.callParent(arguments);
            this.renderLabels();
        }
    });