How to connect piechart and legend in different panels in EXTJS

Question

Hello I am making a piechart in EXTJS. The legends of these charts are not displaying properly they are being cut off. Therefore i am making a piechart in one panel and just under that i am making another panel which would contain the legends.

My question is how do I connect the pie chart in one panel and showing the legend of this pie chart in another panel.

I am using EXTJS 4.2

I am made 2 panels one is under the other in a vbox positioning.

Answer 1

Hope this will help you:

View

layout: {
        type: 'vbox',
        align: 'stretch'
    },
    dockedItems: [
        {
            xtype: 'toolbar',
            flex: 1,
            dock: 'top',
            ui: 'tools',
            items: [
                {
                    xtype: 'tbspacer',
                    flex: 1
                },
                {
                    xtype: 'label',
                    html: '<span style="font-weight:bold">Sales by Category</span>'
                },
                {
                    xtype: 'tbspacer',
                    flex: 1
                },
                {
                    xtype: 'button',
                    iconCls: 'x-fa fa-download',
                    text: 'Download',
                    listeners: {
                        click: 'onDownloadButtonClick'
                    }
                }
            ]
        }
    ],
    items: [
        {
            xtype: 'polar',
            reference: 'salesByCategoryChartRef',
            flex: 1,
            colors: [
                '#115fa6',
                '#94ae0a',
                '#a61120',
                '#ff8809',
                '#ffd13e',
                '#a61187',
                '#24ad9a',
                '#7c7474',
                '#a66111',
                '#009900',
                '#6600cc'
            ],
            insetPadding: '10',
            innerPadding: 10,
            bind: {
                store: '{currentCategoryStore}'
            },
            series: [
                {
                    type: 'pie',
                    highlight: true,
                    label: {
                        field: 'description',
                        display: 'none',
                        font: '12px Arial',
                        contrast: true
                    },
                    tooltip: {
                        trackMouse: true,
                        renderer: 'onSeriesTooltipRender'
                    },
                    angleField: 'sales'
                }
            ],
            interactions: [
                {
                    type: 'rotate'
                }
            ],
            legend: {
                xtype: 'legend',
                docked: 'right'
            }
        }
    ],

Controller:

onSeriesTooltipRender: function(tooltip, record, item) {
        var html = 'Code: ' + record.get('code') +' <br/> Description: ' +
            record.get('description') + '<br/> Sale: ' + record.get('sales') + '%';
        tooltip.setHtml(html);
    },

    onDownloadButtonClick: function(button, e, eOpts) {
        if (Ext.isIE8) {
            Ext.Msg.alert('Unsupported Operation', 'This operation requires a newer version of Internet Explorer.');
            return;
        }
        var chart = this.lookupReference('salesByCategoryChartRef');

        if (Ext.os.is.Desktop) {
            chart.download({
                filename: 'Sales by Category'
            });
        } else {
            chart.preview();
        }
    },

Here is the output PIE Chart