Custom circle tweaks:

- use stroke + fill with white background for circles and polygons

- set the context to use the current strokeWidth and color by default,
  and keep this line width for the standard single-colored symbols.
  Override it as needed (for example for the smiley demo).

diff --git a/dygraph-utils.js b/dygraph-utils.js
index 61aba43..9185a0f 100644 (file)
--- a/dygraph-utils.js
+++ b/dygraph-utils.js
@@ -845,13 +845,14 @@ Dygraph.regularShape_ = function(
     ctx.lineTo(coords[0], coords[1]);
   }
   ctx.stroke();
+  ctx.fill();
   ctx.closePath();
 }
 
 Dygraph.shapeFunction_ = function(sides, rotationRadians, delta) {
   return function(g, name, ctx, cx, cy, color, radius) {
-    ctx.lineWidth = 1;
     ctx.strokeStyle = color;
+    ctx.fillStyle = "white";
     Dygraph.regularShape_(ctx, sides, radius, cx, cy, rotationRadians, delta);
   };
 };
@@ -875,30 +876,30 @@ Dygraph.Circles = {
   CIRCLE : function(g, name, ctx, cx, cy, color, radius) {
     ctx.beginPath();
     ctx.strokeStyle = color;
+    ctx.fillStyle = "white";
     ctx.arc(cx, cy, radius, 0, 2 * Math.PI, false);
     ctx.stroke();
+    ctx.fill();
+    ctx.closePath();
   },
   STAR : Dygraph.shapeFunction_(5, 0, 4 * Math.PI / 5),
   PLUS : function(g, name, ctx, cx, cy, color, radius) {
-    ctx.lineWidth = 1;
     ctx.strokeStyle = color;
 
     ctx.beginPath();
     ctx.moveTo(cx + radius, cy);
     ctx.lineTo(cx - radius, cy);
-    ctx.closePath();
     ctx.stroke();
+    ctx.closePath();
 
     ctx.beginPath();
     ctx.moveTo(cx, cy + radius);
     ctx.lineTo(cx, cy - radius);
-    ctx.closePath();
-
     ctx.stroke();
+    ctx.closePath();
   },
   EX : function(g, name, ctx, cx, cy, color, radius) {
-    ctx.lineWidth = 1;
-    ctx.strokeStyle = "black";
+    ctx.strokeStyle = color;
 
     ctx.beginPath();
     ctx.moveTo(cx + radius, cy + radius);

diff --git a/dygraph.js b/dygraph.js
index 680aa81..0d5fd39 100644 (file)
--- a/dygraph.js
+++ b/dygraph.js
@@ -1762,11 +1762,15 @@ Dygraph.prototype.updateSelection_ = function() {
 
       var circleSize = this.attr_('highlightCircleSize', pt.name);
       var callback = this.attr_("drawHighlightPointCallback", pt.name);
+      var color = this.plotter_.colors[pt.name];
       if (!callback) {
         callback = Dygraph.Circles.DEFAULT;
       }
+      ctx.lineWidth = this.attr_('strokeWidth', pt.name);
+      ctx.strokeStyle = color;
+      ctx.fillStyle = color;
       callback(this.g, pt.name, ctx, canvasx, pt.canvasy,
-          this.plotter_.colors[pt.name], circleSize);
+          color, circleSize);
     }
     ctx.restore();
 

diff --git a/tests/custom-circles.html b/tests/custom-circles.html
index 7a30ea2..0249803 100644 (file)
--- a/tests/custom-circles.html
+++ b/tests/custom-circles.html
@@ -30,6 +30,7 @@
       var frown = function(g, series, ctx, cx, cy, color, radius) {
         mouthlessFace(g, series, ctx, cx, cy, color, radius);
 
+        ctx.lineWidth = 1;
         ctx.fillStyle = "#000000";
         ctx.beginPath();
         ctx.arc(cx, cy + radius, radius - 2, Math.PI + .3, -.3, false);
@@ -37,6 +38,7 @@
       };
 
       var mouthlessFace = function(g, series, ctx, cx, cy, color, radius) {
+        ctx.lineWidth = 1;
         ctx.strokeStyle = "#000000";
         ctx.fillStyle = "#FFFF00";
         ctx.beginPath();