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

score 2 · Accepted Answer · answered Sep 02 '11 at 16:55

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.

answered Sep 02 '11 at 16:55

LittleTreeX

1,259
2
12
28

Thanks for your answer.The shadow:true does nothing if the series renderer set the attribute to even one sprite.But let me ask you.Where in the heck can i find the shadowAttributes options? – Argiropoulos Stavros Sep 03 '11 at 17:19
That's a really good question. Best I can suggest is to look at the source for Ext.chart.series.Pie, and you'll note they use the following options:"stroke-width": 6, "stroke-opacity": 1, stroke: 'rgb(200, 200, 200)', translate: { x: 1.2, y: 2 } – LittleTreeX Sep 03 '11 at 18:28

score 1 · Answer 2 · answered Sep 22 '11 at 14:29

1

I found that

return attributes;

inside the renderer is essential.

answered Sep 22 '11 at 14:29

Argiropoulos Stavros

9,436
11
61
79

Extjs chart shadow

2 Answers2