Maximum and Minimum value of Numeric Axis works weirdly for Stacked bar

[naytha01]

Hi

When i try to set minimum and maximum value , the stacked bar chart is not starting from minimum point and it is showing the bar out of chart axis.


Works fine with minimum set to zero.

Please find the screenshot for reference.





Thanks
Sai

[naytha01]

var panel1 = Ext.create('widget.panel', {
width: 600,
height: 350,
title: 'Stacked Bar Chart',
renderTo: Ext.getBody(),
layout: 'fit',
x: 100,

items: {
xtype: 'chart',
animate: true,
theme: 'myTheme',
shadow: true,
store: store,
legend: false,
axes: [{
type: 'Numeric',
minimum: 10,
maximum: 100,

position: 'bottom',
fields: ['HD', 'NIS','Oct','Green','Yellow','Red'],
title: false,
grid: false,
label: {
renderer: function(v) {
return String(v);
}
},
roundToDecimal: false
}, {
type: 'Category',
position: 'left',
fields: ['CE'],
title: false
}],
series: [{
type: 'bar',
axis: 'bottom',
gutter: 10,
style: {color:0x6238A7, size:10},
yField: ['HD', 'NIS'],
xField: 'CE',

/*renderer: function(sprite, record, attr, index, store) {
var value = 0;
var val =1;
var color = ['red','blue'][value][val];
return Ext.apply(attr, {
fill: color
});
},*/
stacked: true,
tips: {
trackMouse: true,
width: 65,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(String(item.value[1]));
}
}
},
{
type: 'scatter',
axis: 'bottom',
smooth: true,
fill: false,
fillOpacity: 0.5,
xField: 'Green',
yField: ['CE'],
tips: {
trackMouse: true,
width: 80,
height: 40,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('CE'));
this.update(storeItem.get('Green'));
}
},
markerConfig: {
type: 'circle',
size: 4,
radius: 10,
'stroke-width': 0,
fill: 'green',
stroke: '#38B8BF'
}
},
{
type: 'scatter',
axis: 'bottom',
smooth: true,
fill: false,
fillOpacity: 0.5,
xField: 'Yellow',
yField: 'CE',
tips: {
trackMouse: true,
width: 80,
height: 40,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('CE'));
this.update(storeItem.get('Yellow'));
}
},
markerConfig: {
type: 'customMarkerB',
size: 4,
radius: 10,
'stroke-width': 0,
fill: 'yellow',
stroke: '#38B8BF'
}
},
{
type: 'scatter',
axis: 'bottom',
smooth: true,
fill: false,
fillOpacity: 0.5,
xField: 'Red',
yField: ['CE'],
tips: {
trackMouse: true,
width: 80,
height: 40,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('CE'));
this.update(storeItem.get('Red'));
}
},
markerConfig: {
type: 'cross',
size: 4,
radius: 10,
'stroke-width': 0,
fill: 'red',
stroke: '#38B8BF'
}
}]
}
});
});

[naytha01]

Please confirm whether there is any bug in Ext JS causing issue with the stacked bar