@Tim: JSON is a subset of JavaScript, so this is no problem. Using a server side language you can either inject the JSON strings directly in to the JavaScript structure, or add them to variables.

I would like the option of building the gradient in the JSON string instead of via JavaScript. This would be to aid in server side rendering. Is there any way to do that currently?

See http://jsfiddle.net/highcharts/LCdVd/. This has two problems:

1. In the semi-arches for the pie slices, the gradient applies to the slice shape, not relative to the entire pie. This can possibly be compansated for by translating the slices and apply the gradient relative to the canvas.

2. VML support is missing

Later revs of Highcharts in git have support for conditional 'userSpaceOnUse' based on gradient syntax. Here's a slight tweak to Martijn's code snippet to mimic that same behavior:

else if (color && color.radialGradient) {
var renderer = this,
strRadialGradient = 'radialGradient',
radialGradient = color[strRadialGradient],
relativeToShape = !radialGradient.length, // mimic linearGradient's optional syntax
id = PREFIX + idCounter++,
gradientObject,
stopColor,
stopOpacity;
gradientObject = renderer.createElement(strRadialGradient)
.attr(extend({
id: id,
cx: radialGradient.cx || radialGradient[0] || '50%',
cy: radialGradient.cy || radialGradient[1] || '50%',
r: radialGradient.r || radialGradient[2] || '50%',
}, relativeToShape ? null : { gradientUnits: 'userSpaceOnUse' }))
.add(renderer.defs);

each(color.stops, function(stop) {
if (regexRgba.test(stop[1])) {
colorObject = Color(stop[1]);
stopColor = colorObject.get('rgb');
stopOpacity = colorObject.get('a');
} else {
stopColor = stop[1];
stopOpacity = 1;
}
renderer.createElement('stop').attr({
offset: stop[0],
'stop-color': stopColor,
'stop-opacity': stopOpacity
}).add(gradientObject);
});

return 'url('+ this.url +'#'+ id +')';

The thing holding back radial gradients now is IE. If we were to officially support a solution, it must work equally in SVG and VML (IE < 9)

I've quickly added some code that enables radialGradients:

} else if (color && color.radialGradient) {
var renderer = this,
strRadialGradient = 'radialGradient',
radialGradient = color[strRadialGradient],
id = PREFIX + idCounter++,
gradientObject,
stopColor,
stopOpacity;
gradientObject = renderer.createElement(strRadialGradient).attr({
id: id,
gradientUnits: 'userSpaceOnUse',
cx: radialGradient[0],
cy: radialGradient[1],
r: radialGradient[2],
}).add(renderer.defs);

each(color.stops, function(stop) {
if (regexRgba.test(stop[1])) {
colorObject = Color(stop[1]);
stopColor = colorObject.get('rgb');
stopOpacity = colorObject.get('a');
} else {
stopColor = stop[1];
stopOpacity = 1;
}
renderer.createElement('stop').attr({
offset: stop[0],
'stop-color': stopColor,
'stop-opacity': stopOpacity
}).add(gradientObject);
});

return 'url('+ this.url +'#'+ id +')';

Hi,
I am trying to set radial gradient to slices of pie chart. But it doesn't looks like working. Please let me know whether this feature is supported or not.

Thank You,
Venky