Login Register

Gradient fill for bar/column charts

Hi! I'm finally getting to the point where I *should* be able to add gradient fills to some charts.
The gradient fill code is a bit dense, hwoever. I've tried to copy/paste some code from a gradient fill example in dojox.gfx, but that doesn't fly. I tried this;

var fillObj = {
colors: [
{ offset: 0, color: [255, 255, 0, 0] },
{ offset: 0.5, color: "orange" },
{ offset: 1, color: [255, 255, 0, 0] }
]
};

this.chart.addSeries(s, values, {
stroke: {
color: color
},
//fill: color, // Old fill. Works fine

fill: dojo.mixin({ // New, magic fill. Borks filling
type: "linear",
x1: 0, y1: 0,
x2: 10, y2: 0
}, fillObj),

outline: {
color: color
}
});

And what happens is that I get wireframe columns; i.e. the fill doesn't happen. I suspect that an exception gets swallowed, or something gets checked and overlooked somewhere, but it kind of looks like it should work, when looking at the Column class;

dc = dojox.charting.plot2d.common,
...

augmentFill: function(fill, color){
var fc, c = new dojo.Color(color);
if(typeof fill == "string" || fill instanceof dojo.Color){
return dc.augmentColor(fill, color);
}
return fill;
},

...
stroke = run.stroke ? run.stroke : dc.augmentStroke(t.series.stroke, color);
fill = run.fill ? run.fill : dc.augmentFill(t.series.fill, color);
...
...
shape = s.createRect(rect).setFill(fill).setStroke(stroke);

Anyone has any ideas?

Cheers,
PS

It depends on the browser you're testing on.

Some browsers don't support gradients as well as we'd like. But the whole point of the way both charting and the charting Theme system works is to take objects that you could use directly in dojox.gfx for any of the parameters, so in theory if the gradient fill works outside of charting, it should work inside of it.

If you can provide a full-on test case we can hit to see, along with browser+os you are using, that would be very helpful.