PDA

View Full Version : Rendering issue with stacked chart



abcdef
30 Nov 2011, 1:29 PM
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
1 Dec 2011, 6:45 AM
Doesn't look like a config to change this. In most cases, you want some space at the end in a chart.

abcdef
1 Dec 2011, 10:37 AM
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
12 Dec 2011, 3:04 PM
Can someone please help me with this? Thanks.