Rendering issue with stacked chart

[abcdef]

I am using a stacked chart as follows:



Ext.define('MyApp.view.SprintEstimateSummaryChart', {
extend: 'Ext.chart.Chart',
store: '...',
animate: true,
shadow: false,
autoSize: true,
insetPadding: 8,
gradients: [
...
],
series: [{
type: 'bar',
stacked: true,
yField: [
...
],
xPadding: 3,
yPadding: 0,
label: {
display: 'insideEnd',
field: [
...
],
orientation: 'horizontal',
'text-anchor': 'middle',
contrast: true
},
renderer: function(sprite, record, attr, index, store) {
var fill;
switch(index) {
...
};
return Ext.apply(attr, {
fill: fill
});
}
}],
initComponent: function() {
var me = this;
me.initConfig();
me.callParent(arguments);
return me;
}
});


It is inside a container like:




layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
flex: 1,
layout: 'fit',
items: {
xtype: 'sprintestimatesummarychart',
hidden: true
}
}
]


The chart does not seem to size correctly. Here are the images:

29707


29708

The bluish highlighted part is the container of the chart, and as you can see the chart itself does not span the entire width (padding is equal to the spacing on the left)

Any ideas how to correct this?

Thanks in advance!

[mitchellsimoens]

Doesn't look like a config to change this. In most cases, you want some space at the end in a chart.

[abcdef]

Doesn't look like a config to change this. In most cases, you want some space at the end in a chart.

I'm sorry I don't understand. What do you mean by space in the end?

Thanks!

[abcdef]

Can someone please help me with this? Thanks.