PieChart colouring

[manoj123]

I have a tabbed panel with a piechart inside each panel. Piechart in the first tab is displaying fine but rest of them do not have colours. Have attached pictures of correctly displayed and incorrectly displayed piechart snapshots.

Please let me know if you want to see the code for the piechart.

thank you
good.pngnotgood.png

[scottmartin]

Please provide a small working test case that we can use to duplicate.

Scott.

[manoj123]

Thanks for looking. Below is my simplified code using local store.

Ext.onReady(function () {
    
    var generateData = function(n, floor){
        var data = [],
            p = (Math.random() *  11) + 1,
            i;
            
        floor = (!floor && floor !== 0)? 20 : floor;
        
        for (i = 0; i < (n || 12); i++) {
            data.push({
                name: Ext.Date.monthNames[i % 12],
                data: Math.floor(Math.max((Math.random() * 100), floor))
            });
        }
        return data;
    };
    var store = Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data'],
        data: generateData()
    });
    
    var myPanel  = Ext.create('Ext.tab.Panel', {
            region: 'center',
            enableTabScroll: true,
            defaults: {
                border: false,
                activeTab: 0,
                layout: 'fit',
                closable: true
            },
            items:[{
                xtype: 'panel',
                title: 'Tab1',
                closable: false,
                items: [{
                    xtype: 'chart',
                    animate: true,
                    store: store,
                    insetPadding: 60,
                    theme: 'Base:gradients',
                    series: [{
                        type: 'pie',
                        field: 'data',
                        showInLegend: true
                    }]
                }]
            },{
                xtype: 'panel',
                title: 'Tab2',
                closable: false,
                items: [{
                    xtype: 'chart',
                    store: store,
                    insetPadding: 60,
                    theme: 'Base:gradients',
                    series: [{
                        type: 'pie',
                        field: 'data'
                    }]
                }]
            }]
    });


    var viewport = new Ext.Viewport({
        layout: 'border',
        border: false,
        items: [myPanel]
    }); //eo viewport    
    
}); // eo function onReady

[manoj123]

After eliminating line by line, I found

 theme: 'Base:gradients',

is the problem creator. Any reason why same theme cannot be used in different piecharts?

[manoj123]

Removing the theme configuration worked fine. I wanted to use Chart theme to determine the colour based on the chart data.

Can experts help me with this? I am unable to use theme to render charts in different tab panels.

[manoj123]

Can anyone shed some light into this issue? Please!!!

Happy New Year.