title: Axis labels are not visible of an chart in ExtJS 4
body: <p>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 :</p>
  
  <pre><code>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);
      }
  });
  </code></pre>
  
  <p>and what gets drawn is as follows : </p>
  
  <p><img src="https://i.stack.imgur.com/XLGC6.png" alt="enter image description here"></p>
  
  <p>As you can see, title and axis values are not being displayed on chart.</p>
  
  <p>Can anyone please tell me why this is happening??</p>
  
  <p>Thanks in advance !!</p>
  
  <hr>
  
  <p><strong>EDIT 1</strong></p>
  
  <p>After moving <code>legend</code> 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 : </p>
  
  <p><img src="https://i.stack.imgur.com/b6Vbd.png" alt="enter image description here"></p>