Chart bug on tab panel, rendered in other than selected tab..

When I create a chart in a tab panel, it works fine as long as it's positioned in "selected" tab on render. But if I place it in hidden / other than selected tab, it throws error, and the panel draws blank.

I tried to create a test case in Sencha Fiddle but I failed. I didn't know how to include sencha-chart package to a sencha fiddle project. I'm using code from examples, and an app generated by sencha command. So here is my code (I put it all in app/view folder):

Code:

Ext.define('MyApp.view.main.Chart', {
    extend: 'Ext.Panel',
    requires: 'Ext.chart.Chart',
    xtype: 'myapp-chart',
    layout: 'fit',
    initComponent: function() {
        
        var me = this;

        this.myDataStore = Ext.create('Ext.data.JsonStore', {
            fields: ['month', 'data1', 'data2', 'data3', 'data4',
                { name: 'other', convert: function(value, record) {
                    var total = 0;
                    Ext.Object.each(record.data, function(key, value) {
                        total += Ext.isNumber(value) ? value : 0;
                    });
                    return Math.max(0, 100 - total);
                } }
            ],
            data: [
                { month: 'Jan', data1: 20, data2: 37, data3: 35, data4: 4 },
                { month: 'Feb', data1: 20, data2: 37, data3: 36, data4: 5 },
                { month: 'Mar', data1: 19, data2: 36, data3: 37, data4: 4 },
                { month: 'Apr', data1: 18, data2: 36, data3: 38, data4: 5 },
                { month: 'May', data1: 18, data2: 35, data3: 39, data4: 4 },
                { month: 'Jun', data1: 17, data2: 34, data3: 42, data4: 4 },
                { month: 'Jul', data1: 16, data2: 34, data3: 43, data4: 4 },
                { month: 'Aug', data1: 16, data2: 33, data3: 44, data4: 4 },
                { month: 'Sep', data1: 16, data2: 32, data3: 44, data4: 4 },
                { month: 'Oct', data1: 16, data2: 32, data3: 45, data4: 4 },
                { month: 'Nov', data1: 15, data2: 31, data3: 46, data4: 4 },
                { month: 'Dec', data1: 15, data2: 31, data3: 47, data4: 4 }
            ]
        });
        
        me.items = [{
            xtype: 'cartesian',
            width: '100%',
            height: 410,
            style: 'background: #fff;',
            legend: {
                docked: 'bottom'
            },
            store: this.myDataStore,
            insetPadding: {
                top: 40,
                left: 40,
                right: 40,
                bottom: 20
            },
            items: [{
                type: 'text',
                text: 'Column Charts - 100% Stacked Columns',
                font: '22px Helvetica',
                width: 100,
                height: 30,
                x: 40, // the sprite x position
                y: 20  // the sprite y position
            }, {
                type: 'text',
                text: 'Data: Browser Stats 2012',
                font: '10px Helvetica',
                x: 12,
                y: 380
            }, {
                type: 'text',
                text: 'Source: http://ift.tt/rAg5Mm',
                font: '10px Helvetica',
                x: 12,
                y: 390
            }],
            axes: [{
                type: 'numeric',
                position: 'left',
                grid: true,
                fields: ['data1', 'data2', 'data3', 'data4', 'other' ],
                renderer: function(v) { return v + '%'; },
                minimum: 0,
                maximum: 100
            }, {
                type: 'category',
                position: 'bottom',
                grid: true,
                fields: ['month'],
                label: {
                    rotate: {
                        degrees: -45
                    }
                }
            }],
            series: [{
                type: 'bar',
                axis: 'left',
                title: [ 'IE', 'Firefox', 'Chrome', 'Safari', 'Others' ],
                xField: 'month',
                yField: [ 'data1', 'data2', 'data3', 'data4', 'other' ],
                stacked: true,
                style: {
                    opacity: 0.80
                },
                highlightCfg: {
                    fillStyle: '#000',
                    lineWidth: 1,
                    strokeStyle: '#fff'
                },
                tips: {
                    trackMouse: true,
                    style: 'background: #FFF',
                    height: 20,
                    renderer: function(storeItem, item) {
                        var browser = item.series.title[item.series.yField.indexOf(item.yField)];
                        this.setTitle(browser + ' for ' + storeItem.get('month') + ': ' + storeItem.get(item.yField) + '%');
                    }
                }
            }]
        }];
        
        this.callParent();

    }
});

Code:

Ext.define('MyApp.view.main.Main', {
    extend: 'Ext.container.Container',
    requires: [
        'MyApp.view.main.Chart'
    ],
    xtype: 'app-main',
    
    controller: 'main',
    viewModel: {
        type: 'main'
    },

    layout: {
        type: 'border'
    },

    items: [{
        xtype: 'panel',
        bind: {
            title: '{name}'
        },
        region: 'west',
        html: '<ul><li>This area is commonly used for navigation, for example, using a "tree" component.</li></ul>',
        width: 250,
        split: true,
        tbar: [{
            text: 'Button',
            handler: 'onClickButton'
        }]
    },{
        xtype: 'tabpanel',
        region: 'center',
        items:[{
            title: 'Tab 1',
            html: '<h2>Content appropriate for the current navigation.</h2>'

        },{
            title: 'Tab 2',
            xtype: 'myapp-chart'


        }]
    }]
});