/**
* 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.
@@ -86,32 +103,32 @@ Ext.define('Ext.chart.series.Bar', {
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,
@@ -484,7 +501,7 @@ Ext.define('Ext.chart.series.Bar', {
return shadows;
},
- /**
+ /**
* Draws the series for the current chart.
*/
drawSeries: function() {
@@ -596,7 +613,7 @@ Ext.define('Ext.chart.series.Bar', {
},
// @private callback used when placing a label.
- onPlaceLabel: function(label, storeItem, item, i, display, animate, index) {
+ 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,
@@ -630,6 +647,7 @@ Ext.define('Ext.chart.series.Bar', {
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)) {
@@ -638,6 +656,7 @@ Ext.define('Ext.chart.series.Bar', {
} else {
if (height + offsetY > attr.height) {
display = outside;
+ label.isOutside = true;
}
}
x = attr.x + groupBarWidth / 2;
@@ -655,6 +674,7 @@ Ext.define('Ext.chart.series.Bar', {
else {
if (width + offsetX > attr.width) {
display = outside;
+ label.isOutside = true;
}
}
x = display == insideStart ?
@@ -785,12 +805,35 @@ Ext.define('Ext.chart.series.Bar', {
}
},
- /**
+ /**
* Returns a string with the color to be used for the series legend item.
* @param index
*/
getLegendColor: function(index) {
- var me = this;
- return me.colorArrayStyle[index % me.colorArrayStyle.length];
+ 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();
}
-});