Extjs 5.1.0: Grouped Column Chart Renderer does not fill the colors as wanted

Code:

{
    xtype: 'cartesian',
    height: 250,
    width: 400,
    insetPadding: 20,
    store: 'GroupChartStore',
    theme: 'Base:gradients',
    axes: [
        {
            type: 'category',
            fields: [
                'week'
            ],
            label: {
                rotate: {
                    degrees: 315
                }
            },
            title: 'Week End',
            position: 'bottom'
        },
        {
            type: 'numeric',
            fields: [
                'red',
                'yellow',
                'green'
            ],
            majorTickSteps: 4,
            position: 'left',
            title: 'Number of Occurences'
        }
    ],
    series: [
        {
            type: 'bar',
            renderer: function(sprite, record, attributes, index, store) {
                var fields = ['red','yellow','green'];  // This array is the same as yField config of the series
                var theFill = fields[index % fields.length]; // Get the name of the field being rendered based on the column index
                return Ext.apply(attributes,{
                    fill: theFill // Apply the color
                });
            },
            label: {
                field: [
                    'red',
                    'yellow',
                    'green'
                ],
                display: 'insideEnd',
                orientation: 'horizontal'
            },
            xField: 'week',
            yField: [
                'red',
                'yellow',
                'green'
            ],
            stacked: false
        }
    ]
}

Hi,

I have a grouped column chart with renderer to fill the colors of each column separately. My renderer is working fine in Extjs 4.2; however, when I upgraded to Extjs 5.1, it does not work anymore. I want the 1st column to color as 'red', 2nd column as 'yellow', and 3rd column as 'green' for each of the data point in the chart. However, I only get 1 color (either 'red', 'yellow', or 'green') for all three columns in each of the data point (a group of 3 columns).

Please help me if you can. My renderer function is in above code block for you to see.

Thanks so much for your help!

-Dong

Extjs 5.1.0: Grouped Column Chart Renderer does not fill the colors as wanted