Kendo UI (Graph) Add relief to the bubbles on the Bubble chart - css

Question

I was wondering if it's possible to add a relief to the bubbles on the Kendo UI Bubble charts, because, with the 15 given themes, all bubbles stay flat :
http://demos.telerik.com/kendo-ui/bubble-charts/index
It would be nice to add a 3D-style like the pie chart (Uniform style):
http://demos.telerik.com/kendo-ui/pie-charts/index
I guess it could be done by adding a CSS to the SVG, but I'm kind of lost.
Any ideas ?
Thanks :D

Answer 1

A colleague of mine found a solution. You have to call this code after every refresh or draw call :
var svg = $('svg');
var circles = svg.find('circle');
var svgEl = svg[0];
$.each(circles, function (key, circle) {
var fillColor = $(this).attr('fill');
var id = fillColor.replace('#', 'kgrad');
var stops = [
{offset: '0', 'stop-color': fillColor, 'stop-opacity': 0.3},
{offset: '0.84', 'stop-color': fillColor, 'stop-opacity': 0.95},
{offset: '0.85', 'stop-color': fillColor, 'stop-opacity': 0.7},
{offset: '0.99', 'stop-color': fillColor, 'stop-opacity': 1}];
if (svg.find('#' + id).length === 0) {
var svgNS = svgEl.namespaceURI;
var grad = document.createElementNS(svgNS, 'radialGradient');
grad.setAttribute('id', id);
for (var i = 0; i < stops.length; i++) {
var attrs = stops[i];
var stop = document.createElementNS(svgNS, 'stop');
for (var attr in attrs) {
if (attrs.hasOwnProperty(attr))
stop.setAttribute(attr, attrs[attr]);
}
grad.appendChild(stop);
}
var defs = svgEl.querySelector('defs') || svgEl.insertBefore(document.createElementNS(svgNS, 'defs'), svgEl.firstChild);
defs.appendChild(grad);
}
$(this).attr('fill', 'url(#' + id + ')');
}, this);