Creating Custom Gradients on a grouped multi column chart0:

[ChrisWalker]

I have a column series with multiple data columns defined in the yField property that will give me a grouped column chart as opposed to a stacked column chart. When I had just 1 column defined in the yField, I could give the column a gradient using the renderer function for the series:

renderer: function(sprite,storeItem, barAttr, i, store)
{
barAttr.fill = 'url(#gradient0';
return barAttr;}

Where the URL is defined in the chart's gradients config item-

[
id: 'gradient0',
angle:90,
stops: {
   0:{ color: 'rgb(125,185,232)'},
  100: {color: 'rgb(30,87,153)'}
},
{
    id:'gradient1',
   angle:90,
   stops: {
         0:{color:'rgb(0,0,0)'}
        100:{color:'rgb(255,0,0)'}
}
}
]

However with multiple yFields defined in the series, I am having difficulty trying to find which field I am drawing at the time. The i parameter in the renderer function tells me which bar I am drawing for the whole chart and the StoreItem shows me what record, but what I would like is to tell me which yField it is drawing. Any ideas?

[ChrisWalker]

Unless someone has a more elegant way to do this, a simple javascript modulus operation in the renderer should tell me which column in the group I am working on:

SeriesItem.renderer = function (sprite, storeItem, barAttr, i, store) {
            var groupItem = i % this.yField.length;
            barAttr.fill = 'url(#gradient' + groupItem.toString() + ')';
            return barAttr;
        };

this = the series so I have the yField array to work with. The variable i in the function tells me which column in the chart it is rendering- if I have 50 columns total then i can be from 0 to 49. So if the renderer passes i = 21 and yField array length = 2 then i % this.yField.length or 21 % 2 = 1 which tells me that I am rendering the 2nd item in the group (0 based). I then set the fill = 'url(#gradient1)'. It seems to work for now.