Extjs chart shadow

Question

I have the following code to contruct a pie chart.
The problem is i don't get a shadow.
Note : If the chart config, theme='Base', then the pie has a shadow

Ext.define('ChartPanel', {
    extend: 'Ext.panel.Panel',
    //------------------CONSTRUCTOR  
    , constructor: function(externalConfigs) {
        externalConfigs = externalConfigs || {}; 

        var configs = {
            title: 'My panel',
            items: [
            {
                xtype: 'chart',
                store: myStore,
                width: '30%',
                series: [{
                    type: 'pie'
                        , field: 'persentage'
                        , shadow: 'sides'
                        , showInLegend: false
                        , donut: false
                        , renderer: function(sprite, record, attributes, index, store) {
                            if (record.data.description == 'option1') {
                                sprite.setAttributes({
                                    fill: 'url(#redGradient)',
                                    stroke: '#ffffff'
                                }, false);
                            } else if (record.data.description == 'option2') {
                                sprite.setAttributes({
                                    fill: 'url(#greenGradient)',
                                    stroke: '#ffffff'
                                }, false);
                            }
                        }
                   }]
                   , gradients: [{
                        id: 'redGradient',
                        angle: 45,
                        stops: {
                            0: { color: '#820000' },
                            100: { color: '#BD1E00' }
                        }                        
                    }, {
                        id: 'greenGradient',
                        angle: 0,
                        stops: {
                            0: { color: '#89AC10' },
                            100: { color: '#A1C22D' }
                        }
                    }]
                } 
            ]
            }

            Ext.apply(configs, externalConfigs);
            this.callParent([configs]); //Call the parent constructor
        }


    });    

Any ideas how to get a shadow? Thanks

Answer 1

I found that

return attributes;

inside the renderer is essential.

Answer 2

Use shadow: true (see the docs in the previous link to see other possible options) within your chart definition. (Not within the pie definition). There is no shadow config property for Ext.chart.series.Pie. You would need to use shadowAttributes within Ext.chart.series.Pie.