Not possible to show a Chart in a container that is hidden initially

[matsbryntse]

Such as a Tooltip

new Button({
                appendTo  : container,
                text      : 'Rich tooltip with chart',
                icon      : 'fa-chart-line',
                color     : 'b-blue',
                rendition : 'tonal',
                tooltip   : {
                    cls       : 'rich-tooltip-demo',
                    width     : 420,
                    minWidth  : 420,
                    maxWidth  : 420,
                    minHeight : 400,
                    header    : {
                        title : 'Performance Metrics',
                        dock  : 'top'
                    },
                    tools : {
                        settings : {
                            cls     : 'fa fa-cog',
                            handler : () => Toast.show('⚙️ Settings clicked!')
                        }
                    },
                    items : [
                        // {
                        //     type : 'container',
                        //     html : `
                        //         <div style="padding: 0.75em 1em; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 0.5em; margin-bottom: 0.75em;">
                        //             <div style="color: white; opacity: 0.9; font-size: 0.85em; margin-bottom: 0.25em;">Total Revenue</div>
                        //             <div style="color: white; font-size: 1.75em; font-weight: bold;">$47,250</div>
                        //             <div style="color: white; opacity: 0.8; font-size: 0.85em; margin-top: 0.25em;">
                        //                 <i class="fa fa-arrow-up"></i> +12.5% this month
                        //             </div>
                        //         </div>
                        //     `
                        // },
                        {
                            type   : 'container',
                            layout : 'vbox',
                            style  : 'padding: 0 1em 0.75em 1em;',
                            items  : [
                                {
                                    type       : 'chart',
                                    ref        : 'chart',
                                    width      : 300,
                                    height     : 200,
                                    chartType  : 'line',
                                    labels     : { field : 'day' },
                                    gridColor  : 'transparent',
                                    showAxes   : false,
                                    showLegend : false,
                                    pointSize  : 2,
                                    series     : [{
                                        field     : 'visits',
                                        label     : 'Website Visits',
                                        fill      : true,
                                        fillColor : 'rgba(33, 150, 243, 0.2)'
                                    }],
                                    data : [
                                        { day : 'Mon', visits : 65 },
                                        { day : 'Tue', visits : 72 },
                                        { day : 'Wed', visits : 81 },
                                        { day : 'Thu', visits : 78 },
                                        { day : 'Fri', visits : 95 },
                                        { day : 'Sat', visits : 88 },
                                        { day : 'Sun', visits : 76 }
                                    ]
                                },
                                {
                                    type  : 'container',
                                    style : 'display: grid; grid-template-columns: 1fr 1fr; gap: 0.75em; margin-top: 0.75em;',
                                    items : [
                                        {
                                            html : `
                                                <div style="padding: 0.5em; background: var(--panel-background-color); border-radius: 0.25em; border: 1px solid var(--b-neutral-90);">
                                                    <div style="font-size: 0.75em; opacity: 0.6; margin-bottom: 0.25em;">Avg. Order</div>
                                                    <div style="font-weight: 600;">$127</div>
                                                </div>
                                            `
                                        },
                                        {
                                            html : `
                                                <div style="padding: 0.5em; background: var(--panel-background-color); border-radius: 0.25em; border: 1px solid var(--b-neutral-90);">
                                                    <div style="font-size: 0.75em; opacity: 0.6; margin-bottom: 0.25em;">Orders</div>
                                                    <div style="font-weight: 600;">372</div>
                                                </div>
                                            `
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            });