I know this is something you don't officially support, but I was hoping you might have an idea to help me out. I have this HighChart control (extends Ext.BoxComponent) that I'm working on and I have it set in the header (North Panel) of a viewport. In the listener of the panel I have created in the North layout I have after render loading the chart control, it works correctly and renders to the size of the panel. When the panel is resized however it doesn't resize the chart. I can click on reload, and it will re render the chart to the new correct size.

I guess my question I need to re render this panel after a viewport resize. Any ideas I'm just a little lost..

I'll post my code, any ideas? (BTW when I place it in a window it works correctly and as expected, it will always keep resizing to the window making me think i have to call that resize command which now slips my mind)

<script type="text/javascript">
    function panelLoaded() {

        var chart;
        var store2 = new Ext.data.JsonStore({
            fields: ['season', 'total'],
            data: [{
                season: 'Summer',
                total: 150
            }, {
                season: 'Fall',
                total: 245
            }, {
                season: 'Winter',
                total: 117
            }, {
                season: 'Spring',
                total: 184
            }]
        });

        chart = new Ext.ux.HighChart({
            store: store2,
            height: 325,
            series: [
                  {
                      type: 'pie',
                      name: 'Views',
                      categorieField: 'season',
                      dataField: 'total'
                  }
              ],
            chartConfig: {
                chart: {
                    margin: [50, 150, 60, 80]
                },
                title: {
                    text: 'Employees By Business Unit',
                    style: {
                        margin: '10px 100px 0 0' // center it
                    }
                },
                subtitle: {
                    text: 'Source: DeAngelo Brothers Inc',
                    style: {
                        margin: '0 100px 0 0' // center it
                    }
                },
                legend: {
                    layout: 'vertical',
                    style: {
                        left: 'auto',
                        bottom: 'auto',
                        right: '10px',
                        top: '100px'
                    }
                }
            }
        });

//              var graphWin = new Ext.Window({
//                  title: 'Resizeable Graph Window',
//                  resizeable: true,
//                  width: 400,
//                  height: 400,
//                  layout: 'fit',
//                  items: [chart]
//              });
//              graphWin.show();
        
        Chart1Panel.add(chart);
        Chart1Panel.doLayout();
       

    }
</script>
// NORTH Panel in viewport/borderlayout

<North Split="true">
    <ext:Panel runat="server" ID="Chart1Panel" Title="Test"  >
        <Listeners>
            <AfterRender Fn="panelLoaded" />
        </Listeners>
    </ext:Panel>
</North>