hidden true not working

[sandeepmnit35]

I am trying below code and want to hide the chart at the starting and later on button click I want to show it but it is not hiding the chart.

Ext.define('RA.view.Panel1', {
    extend: 'Ext.Panel',
    xtype: 'panel1',
    requires: [
               'Ext.chart.Panel'
    ],
    config: {
        id: 'Panel1',
        layout: {type: 'vbox', pack: 'center'},
        flex: 1,
        style: "background-color: black; color:white",
        items: [
                {
                    xtype: 'chart',
            hidden: true,
                    id: 'chart1',
                    //html: "<h1 style = 'color: red'>To configure this chart, tap this panel, click Settings to select axes, chart type, granularity, etc., then click Select Dates to select start and end dates.</h1>"
                },
                                
                {
                    xtype: 'button',
                    html: 'Add chart',
                    ui: 'confirm',
                    id:'chart1Button',
                    style: 'font-size: 14px; margin-left: 60px; margin-right: 60px; margin-top: 5px; margin-bottom: 5px;',                                
                },
        ]
    }
});

I tried below code to hide the chart in app.js but it is not hiding the chart :

var charts = Ext.ComponentQuery.query('#Panel1 > chart');
Ext.Array.each(charts, function(chart){

if (chart.getId()=='chart1')
{
alert(chart.getId());

            chart.hide();
}
});

[mitchellsimoens]

This using the deprecated Touch Charts 2 beta or the new charts within ST 2.1.0?

[sandeepmnit35]

Chart beta 2.0