I tried using the markerOptions
properties as you did and failed. Therefore I wrote my own ShapeRenderer and used this instead of the default jqPlot one to draw both the semi-transparent outer circle and the inner marker circle. The end result looks like this:
I've just done a quick and dirty solution to show how it can be done this way (i.e. the colours and circle radius are defined in the ShapeRenderer). A more elegent (and reusable) way to do this would be to allow the colours, radius etc to be defined in the options and modify the custom ShapeRenderer work with the options passed in.
The custom ShapeRenderer code is as follows (this could be factored out into an external Javascript file):
(function ($) {
$.jqplot.customMarkerRenderer = function (options) {
$.extend(true, this, options);
};
$.jqplot.customMarkerRenderer.prototype.init = function (options) {
$.extend(true, this, options);
};
$.jqplot.customMarkerRenderer.prototype.draw = function (ctx, points, options) {
ctx.save();
// Shadow
ctx.lineWidth = 30;
ctx.strokeStyle = 'rgba(108, 161, 93, 0.3)';
ctx.beginPath();
ctx.arc(points[0], points[1], points[2], points[3], points[4], true);
ctx.closePath();
ctx.stroke();
// Yellow inner
ctx.lineWidth = 10;
ctx.fillStyle = '#F6C528';
ctx.beginPath();
ctx.arc(points[0], points[1], points[2], points[3], points[4], true);
ctx.closePath();
ctx.fill();
ctx.restore();
};
})(jQuery);
It can be defined in the jqchart options as follows:
markerOptions: {
...
shapeRenderer: new $.jqplot.customMarkerRenderer()
}
I've created a Fiddle to demonstrate this.