jquery - Custom Marker for JQPLOT -

is there way add multiple different effects marker?

i know there's line, color , shadow properties, me try create following design, i've been failing past 2 hours , have come absolutely nothing!

seriesdefaults: {     linewidth: 50,     color: 'yellow',     markerrenderer: $.jqplot.markerrenderer,     markeroptions: {         show: true,         style: 'circle',         color: 'white',         linewidth: 4,         size: 25,         shadow: true,         shadowangle: 0,         shadowoffset: 0,         shadowdepth: 1,         shadowalpha: 0.07     } } 

i feel need following attributes: markerbackgroundcolor, markershadowsize achieve result.

is there can css3? create own html marker , style that?

i tried using markeroptions properties did , failed. therefore wrote own shaperenderer , used instead of default jqplot 1 draw both semi-transparent outer circle , inner marker circle. end result looks this:

i've done quick , dirty solution show how can done way (i.e. colours , circle radius defined in shaperenderer). more elegent (and reusable) way allow colours, radius etc defined in options , modify custom shaperenderer work options passed in.

the custom shaperenderer code follows (this factored out 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 defined in jqchart options follows:

markeroptions: {     ...     shaperenderer: new $.jqplot.custommarkerrenderer() } 

i've created fiddle demonstrate this.