Axis labels are not visible of an chart in ExtJS 4

Question

I am trying to draw an chart inside panel. Chart bars are getting drawn correctly but x and y axis labels are not shown when chart is drawn. Code to draw chart is as follows :

Ext.require([
    'Ext.form.*',
    'Ext.chart.*',
    'Ext.layout.container.*'
]);

Ext.define('ilp.view.EmployeeCountControl', {
    extend : 'Ext.panel.Panel',
    alias : 'widget.employeeCountControl',

    require : [
        'ilp.store.Employees',
        'ilp.store.Dimensions'
    ],

    layout : {
        type : 'vbox',
        align : 'stretch',
        pack : 'start'
    },

    title : 'Select dimension to view chart',

    initComponent : function() {
        this.items = [
            {
                xtype : 'combobox',
                fieldLabel : 'Select Dimension',
                store : 'Dimensions',
                queryMode : 'local',
                displayField : 'name',
                valueField : 'dimension',
                flex : 1
            },
            {
                xtype : 'chart',
                title : 'selected dimension',
                store : 'Employees',
                flex : 2,
                width: 150,
                height: 200,
                legend : {
                    position : 'right'
                },
                axes : [
                    {
                        title : 'Emp Count',
                        type : 'Numeric',
                        position : 'left',
                        fields : ['hpCount', 'nonhpCount'],
                        minimum : 0,
                        grid : true
                    },
                    {
                        title : 'selected dimension',
                        type : 'Category',
                        position : 'bottom',
                        fields : ['dimension']
                    }
                ],
                series : [
                    {
                        type : 'bar',
                        column :true,
                        stacked : true,
                        highlight: true,
                        axis : 'left',
                        xField : ['dimension'],
                        yField : ['hpCount', 'nonhpCount'],
                        yPadding : 10
                    }
                ]
            }
        ];
        this.callParent(arguments);
    }
});

and what gets drawn is as follows :

As you can see, title and axis values are not being displayed on chart.

Can anyone please tell me why this is happening??

Thanks in advance !!

---

EDIT 1

After moving legend to bottom, I got x axis values but now those values are getting hidden behind legend and also those values are going out of panel. Does anyone knows how to decrease the size of actual chart and bars to fit axis values properly? My chart now looks as follows :

Answer 1

Set Width and/or Padding to your Layout and/or Panel and see the changes. I think it's about the chart parent container not the chart itself.