Extjs pie chart instance

I am using extjs 4.2 pie chart and have multiple entries in my store. I want to show the color of the legend the same as for each slice color. currently every legend color is the same in my version, but in my development version it works correctly. here is my code.

development snapshot

production shot

{
        xtype: 'piechartattendancereport',
        itemId: 'studentattandencesummeryvise',
        title: 'Attendance Summary',
        width : 450,
        minHeight : 240,
        store: 'mystore.store.attendance.PendingAttendanceGridStore',
        countField: 'totalDays',
        valueField: 'programName'
    }




Ext.define('myapp.view.PieChartAttendanceReport', {
    extend: 'Ext.chart.Chart',
    alias: 'widget.piechartattendancereport',
    animate: true,
    shadow: true,
    legend: {
        position: 'right'
    },
    insetPadding: 30,
    theme: 'Base:gradients',
    initComponent: function() {
        var this$ = this;
        var countField = !isNullOrEmpty(this.countField)?this.countField:'number';
        var valueField = !isNullOrEmpty(this.valueField)?this.valueField:'category';
        var showLegend = (!isNullOrEmpty(this.legendField)&& this.legendField)?true:false;
        var chartStore = null;
        if(!isNullOrEmpty(this.store)){
            chartStore = Ext.create(this.store);
        }else{
            chartStore = Ext.create('Ext.data.JsonStore',{
                fields: ['number', 'category'],
                data: [{
                    number :0,
                    category : 'Category'
                }]
            });
        }
        Ext.apply(this$, {
            store: chartStore,
            series: [{
                type: 'pie',
                field: countField,
                showInLegend: true,
                donut: false,
                tips: {
                    trackMouse: true,
                    //width: 300,
                    height: 28,
                    layout: 'fit',
                    renderer: function(storeItem, item) {
                        var total = 0;
                        chartStore.each(function(rec) {
                            total += rec.get(countField);
                        });
                        var tipTitle = storeItem.get(valueField) + ': ' + storeItem.get(countField);
                        var length = (tipTitle.length)* 10;
                        this.setWidth(length);
                        this.setTitle(tipTitle);
                    }
                },
                highlight: {
                    segment: {
                        margin: 20
                    }
                },
                label: {
                    field: valueField,
                    display: 'rotate',
                    contrast: true,
                    font: '15px Arial',
                    renderer: function(value, label, storeItem, item, i, display, animate, index) {
                        var text;
                        if(storeItem.get(countField)!= undefined ||  storeItem.get(countField)!= null){
                            if(storeItem.get(countField) == 0){
                                text = '';
                            }else{
                                text = storeItem.get("Present")+ '%' ;
                                if(text.length > 12){
                                    text = text.substring(0, 10) + '..';
                                }
                            }

                        }else{
                            text = value;
                        }
                        label.setAttributes({
                            text: text
                        }, true);
                        return text;
                    }
                }
            }]
        });

        this$.callParent(arguments);
    }
});