ST2.1 vs ST2.2 chart sprite style renderer

Question

With ST2.1, I had a scatter graph with a renderer function changing all sprite rotation and color based on values in the store. It was working well. I upgraded to ST2.2.0 and now I'm having trouble rebuilding the same function.

code for ST2.1 - was working.

series: [
                    {
                        type: 'scatter',
                        xField: 'local_date_time',
                        yField: 'wind_spd_kt',
                        marker: { ...
                            },
                        style: {
                               renderer: function (target, sprite, index, storeItem) {
                                        var sweather = Ext.getStore('Sun');
                                        if (index < sweather.getCount() ){
                                            target.rotationRads = storeItem.data.sun_dir;
                                            if  (storeItem.data.sun_spd_kt < 10) { 
                                                 target.fill = '#ff0000'; //red
                                                 //console.log ( index + ' : <10  :' + storeItem.data.sun_spd_kt )
                                             }
                                            else { target.fill = '#00EE00'; } //green
                                        }
                                    }
                        },

COde in ST2.2.0 that I tried:

style: {
                            renderer: function (sprite, config, rendererData, index) {
                                        sprite.rotationRads = rendererData.store.data.all[index].raw.sun_dir
                                        sprite.attr.fillStyle = '#ff0000'
                                        }
                                    }

Has Anyone used "renderer" successfully in ST2.2.0?

Answer 1

I made up a solution to your problem. Could you try the following ?

renderer: function (sprite, config, rendererData, index) {
    if (index % 2 == 0) {
        return { strokeStyle: 'red' };
    }
}