[OPEN] Sencha Charts - Cannot Add Charts In Certain Scenarios

If you try adding a Sencha chart to a component after initial creation of the chart, you get the following error:
Unable to get property 'getSize' of undefined or null reference This occurs before the add call. The add call seems to complete successfully but nothing is actually rendered to the page.

Below is ExtJS4 code which works as expected and the ExtJS5 code equivalent which doesn't.

Working ExtJS 4 Code (also found here: http://ift.tt/1vFSwlr)

Code:

Ext.onReady(function(){
    var wnd = Ext.create('Ext.window.Window', {
        title: 'Test',
        height: 200,
        width: 300,
        resizable: true,     
        shadow: false,
        layout: 'fit',
        renderTo: Ext.getBody()
    });
    
    var chart = Ext.create('Ext.chart.Chart', {
            store: {
                fields: ['name', 'value'],
                data: [
                    { name: 'metric one', value: 10 },
                    { name: 'metric two', value: 7 },
                    { name: 'metric three', value: 5 },
                    { name: 'metric four', value: 2 },
                    { name: 'metric five', value: 27 }
                ]
            },
            series: [{
                type: 'column',
                xField: 'name',
                yField: 'value',
                style: {
                    maxBarWidth: 50
                }
            }],
            axes: [
            {
                type: 'numeric',
                position: 'left',
                grid: true,
                label: {
                    rotate: {
                        degrees: -30
                    }
                }
            }, 
            {
                type: 'category',
                position: 'bottom'
            }
            ]
        });
    
    setTimeout(function(){      
        wnd.add(chart);
    }, 5000);


    wnd.show();
});

Not-Working ExtJS 5 Code

Code:

Ext.onReady(function(){
    var wnd = Ext.create('Ext.window.Window', {
        title: 'Test',
        height: 700,
        width: 800,
        resizable: true,       
        layout: 'fit',
        renderTo: Ext.getBody()
    });
    
    var chart = Ext.create('Ext.chart.CartesianChart', {
        store: {
            fields: ['name', 'value'],
            data: [
                { name: 'metric one', value: 10 },
                { name: 'metric two', value: 7 },
                { name: 'metric three', value: 5 },
                { name: 'metric four', value: 2 },
                { name: 'metric five', value: 27 }
            ]
        },
        series: {
            type: 'bar',
            xField: 'name',
            yField: 'value',
            style: {
                maxBarWidth: 50
            }
        },
        axes: [
        {
            type: 'numeric',
            position: 'left',
            grid: true,
            label: {
                rotate: {
                    degrees: -30
                }
            }
        }, 
        {
            type: 'category',
            position: 'bottom'
        }
        ]
    });


    setTimeout(function(){      
        wnd.add(chart);
    }, 3000);


    wnd.show();
});