Chart won't render in proper panel

[gp40]

I'm trying to get a chart to render in a particular panel. In the example below I have a 'hbox' with two panels. Regardless of what I do the chart always seems to render in the first panel. I'm sure it has something to do with absolute vs relative positioning but I haven't had any luck thus far. Any ideas? Much thanks!!! /Greg

Ext.setup({    onReady: function() {
        
	Ext.regModel('Fruit',{
		fields: [
			{ name: 'type', type: 'string'},
			{ name: 'num', type: 'number'} ]
	});
	   
      var store2 = new Ext.data.JsonStore({
		  model: 'Fruit',
            data: [{type: 'Apple', num: 5},
			    {type: 'Pear', num: 2}]
      });




	 var p = new Ext.chart.Chart ({
               cls: 'pie1',
			title: 'something',
		     style: 'position:relative',
               width: 200,
			height : 200,
               store: store2,
                series: [{
                    type: 'pie',
                    field: 'num',
                    label: {
                        field: 'type'
                    }
                }]
            });
            
	 new Ext.Panel({
		fullscreen: true,
		dockedItems: [{
            dock : 'top',
            xtype: 'toolbar',
            title: 'TEST'
		}],
		layout: { type: 'hbox', align: 'stretch' },
		defaults: {	flex: 1, type: 'panel'},
		// items: [ { html: 'Left' } , { html: 'Right' } ]  // works
		items: [ { html: 'Left' } , p ]  // works
	 });
	}
})

[sla]

I have the exact same problem. Has anyone found a solution?

[kholy]

I also have the same issue, any update on this?

[hundare]

any solution on this????

[shydreamz]

the solution to this is
just remove the cls:'pie1' property from the chart declaration as this breaks the css styling of charts
as cls config cause the predefined css class of panel to replace by pie1
so if u want to use 'pie1' css use it in baseCls config option.

it will work