EXtJS chart bar/column not fitting in window container, expanding beyond/out of it

Question

I am using EXtJS charts to chart data and for some reason it is expanding to the right of window containing it and when using columns, above the window. It seems to be a scaling issue as with just one column/bar it scales and fits everything in perfectly.

{
        title: title,
        closable:true,
        collapsible: true,

        //width: 600,
        height: 400,
        layout: 'fit',
           store: Ext.create('Ext.data.Store', {
        fields : [ 'metrics', 'dimensions' ],
        data : [ {'metrics':metrics, 'dimensions':dimensions}
        ]
           }),
        tbar: [{
            text: 'Save Chart',
            handler: function() {
                Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
                    if(choice == 'yes'){
                        var chart = Ext.getCmp('barchart');
                        chart.save({
                            type: 'image/png'
                        });
                    }
                });
            }
        }, {
            text : 'Add a Date Range',
            handler : function() {
                DateMenu.showBy(this,"bl");
                dateMenuContext=this;
            }
        }],
        items: [    
                    {
                xtype: 'chart',
                animate: true,
                shadow: true,
                  style: 'background:#fff',
                  store: store,
                legend: {
                    position: 'right'
                },
                axes: [{
                    type: 'Numeric',
                    position: axesposition,
                    fields: x,
                    title: title+String(" [Metrics: "+String(metrics)).concat(((dimensions!=null)&&(dimensions!=""))? String(", Dimensions: "+dimensions+"]")  : "]"),
                    grid: true,

                     minimum: 0,
                    label: {
                    renderer: function(v) {
                    return String(v);
                    }
                    },

                    roundToDecimal: false
                }, {
                    type: 'Category',
                    position: categoryposition,
                    fields: y,
                    title: false
                }],
                series: [{
                    type: tp,
                    label : {
                        display : "outside",
                        color : '#333',
                        'text-anchor' : 'middle',
                        field : x

                    },
                    axis: seriesaxisposition,
                    gutter: 80,
                    xField: y, 
                    yField: x,

                     highlight: true,

                      tips: {
                        trackMouse: true,
                        width: 140,
                        height: 28,
                        renderer: function(storeItem, item) {
                            this.setTitle(String(item['yField'])+": "+String(item.value[1]));
                        }
                    }
                }]


    },
    ]
        };

Answer 1

A Ha! I Had to explicitly define type as int in the field for my store/model. It worked fine before, but for some reason this fixed it.

http://www.sencha.com/forum/showthread.php?199952-4.1.0-Stacked-Column-Chart-with-Missing-Y-Value-has-Incorrect-Maximum&p=844595#post844595