'medianColor' no longer affects current drawing context if not set

Only sets the stroke style if there is a color set (e.g. not null) else it uses the current border color. This also rearranges the drawing order so that the box outline is drawn on top of the median line, so that you don't end up with the median line cutting into the border.

Author: Luke Lowrey

src/elements/base.js

@@ -8,7 +8,7 @@ export const defaults = {
   borderWidth: 1,
   outlierRadius: 2,
   outlierColor: Chart.defaults.global.elements.rectangle.backgroundColor,
-  medianColor: Chart.defaults.global.elements.rectangle.borderColor,
+  medianColor: null,
   itemRadius: 0,
   itemStyle: 'circle',
   itemBackgroundColor: Chart.defaults.global.elements.rectangle.backgroundColor,

src/elements/boxandwhiskers.js

@@ -85,13 +85,34 @@ const BoxAndWiskers = Chart.elements.BoxAndWhiskers = ArrayElementBase.extend({
     const x = vm.x;
     const width = vm.width;
     const x0 = x - width / 2;
+
+    // Draw the q1>q3 box
     if (boxplot.q3 > boxplot.q1) {
       ctx.fillRect(x0, boxplot.q1, width, boxplot.q3 - boxplot.q1);
-      ctx.strokeRect(x0, boxplot.q1, width, boxplot.q3 - boxplot.q1);
     } else {
       ctx.fillRect(x0, boxplot.q3, width, boxplot.q1 - boxplot.q3);
+    }
+
+    // Draw the median line
+    ctx.save();
+    if (vm.medianColor) {
+      ctx.strokeStyle = vm.medianColor;
+    }
+    ctx.beginPath();
+    ctx.moveTo(x0, boxplot.median);
+    ctx.lineTo(x0 + width, boxplot.median);
+    ctx.closePath();
+    ctx.stroke();
+    ctx.restore();
+
+    // Draw the border around the main q1>q3 box
+    if (boxplot.q3 > boxplot.q1) {
+      ctx.strokeRect(x0, boxplot.q1, width, boxplot.q3 - boxplot.q1);
+    } else {
       ctx.strokeRect(x0, boxplot.q3, width, boxplot.q1 - boxplot.q3);
     }
+
+    // Draw the whiskers
     ctx.beginPath();
     ctx.moveTo(x0, boxplot.whiskerMin);
     ctx.lineTo(x0 + width, boxplot.whiskerMin);
@@ -103,26 +124,39 @@ const BoxAndWiskers = Chart.elements.BoxAndWhiskers = ArrayElementBase.extend({
     ctx.lineTo(x, boxplot.q3);
     ctx.closePath();
     ctx.stroke();
-    ctx.save();
-    ctx.strokeStyle = vm.medianColor;
-    ctx.beginPath();
-    ctx.moveTo(x0, boxplot.median);
-    ctx.lineTo(x0 + width, boxplot.median);
-    ctx.closePath();
-    ctx.stroke();
-    ctx.restore();
   },
   _drawBoxPlotHoriz(vm, boxplot, ctx) {
     const y = vm.y;
     const height = vm.height;
     const y0 = y - height / 2;
+
+    // Draw the q1>q3 box
     if (boxplot.q3 > boxplot.q1) {
       ctx.fillRect(boxplot.q1, y0, boxplot.q3 - boxplot.q1, height);
-      ctx.strokeRect(boxplot.q1, y0, boxplot.q3 - boxplot.q1, height);
     } else {
       ctx.fillRect(boxplot.q3, y0, boxplot.q1 - boxplot.q3, height);
+    }
+
+    // Draw the median line
+    ctx.save();
+    if (vm.medianColor) {
+      ctx.strokeStyle = vm.medianColor;
+    }
+    ctx.beginPath();
+    ctx.moveTo(boxplot.median, y0);
+    ctx.lineTo(boxplot.median, y0 + height);
+    ctx.closePath();
+    ctx.stroke();
+    ctx.restore();
+
+    // Draw the border around the main q1>q3 box
+    if (boxplot.q3 > boxplot.q1) {
+      ctx.strokeRect(boxplot.q1, y0, boxplot.q3 - boxplot.q1, height);
+    } else {
       ctx.strokeRect(boxplot.q3, y0, boxplot.q1 - boxplot.q3, height);
     }
+
+    // Draw the whiskers
     ctx.beginPath();
     ctx.moveTo(boxplot.whiskerMin, y0);
     ctx.lineTo(boxplot.whiskerMin, y0 + height);
@@ -134,12 +168,6 @@ const BoxAndWiskers = Chart.elements.BoxAndWhiskers = ArrayElementBase.extend({
     ctx.lineTo(boxplot.q3, y);
     ctx.closePath();
     ctx.stroke();
-    ctx.strokeStyle = vm.medianColor;
-    ctx.beginPath();
-    ctx.moveTo(boxplot.median, y0);
-    ctx.lineTo(boxplot.median, y0 + height);
-    ctx.closePath();
-    ctx.stroke();
   },
   _getBounds() {
     const vm = this._view;