extjs4 - How to change color of column graph dynamically using Extjs? -

i have done application using extjs. requirement need change color of column graph dynamically after february. find attached image, here have 2 fields based on plot column graph. showing 2 different fields different color column in graph. my problem after february month, need change color of 1 column different color (marked in attached image). field value same need change color. if plot graph hard coded value, can change color particular month. here plotting graph based on store value dynamically. can tell me how achieve 1 in extjs? possible or not in extjs?. great appropriated. thank you

here code:

ext.define('ext.chart.theme.columncolortheme', {     extend: 'ext.chart.theme.base',     constructor: function(config) {         this.callparent([ext.apply(         {                      axistitleleft: {                 font:'15px arial',                 fill:'#0185d7'             },             axistitleright: {                 font:'15px arial',                 fill:'#0185d7'             },             colors: ['rgb(50, 150, 255)','rgb(0, 70, 100)']         }, config)]);     } });  ext.define('myweb.view.utilizationreportgraphview', {     extend:'ext.chart.chart',     requires:['ext.chart.series.column','ext.chart.series.line','ext.chart.axis.numeric','ext.chart.axis.category'],     alias:'widget.utilizationview',     id:'utilizationviewid',     theme:'columncolortheme',         height:window.innerheight/2,     width:window.innerwidth,     store:'revenuereportstore',     legend:{         position:'top'           },     axes:[     {         type: 'numeric',         position: 'left',         fields: ['dayratebudget','dayrateactual'],         minimum:0      },     {         type: 'category',         position: 'bottom',         fields: ['month']      },     {         title: 'variance in %',         type: 'numeric',         position: 'right',         fields: ['utilizationpercentage']     }     ],     series: [     {         type: 'column',         axis: 'left',         xfield: 'month',         yfield: ['dayratebudget','dayrateactual'],         groupgutter:20,         gutter:100,         title:['budget','actual']     },            {         type: 'line',         axis: 'right',         xfield: 'month',         yfield: ['utilizationpercentage'],         markerconfig: {             type: 'circle',             fill:'red',             stroke:'red',             'stroke-width': 0         },         style:{             stroke:'red',             'stroke-width': 2         },         title:['variance']      }     ]        }); 

you can set renderer function on column series this:

renderer: function (sprite, record, attr, index) {     var color = '#000000'; //some logic here      return ext.apply(attr, {         fill: color     }); } 

working example: http://jsfiddle.net/pspm6/