Merge pull request #97 from tscans/master

fixed issue with conflicting median and segment draws.

Author: dg-datavisyn

samples/vertical_segment.html

@@ -36,22 +36,14 @@
         label: 'Dataset 1',
         backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
         borderColor: window.chartColors.red,
-        borderWidth: 5,
+        borderWidth: 1,
+        medianColor:"green",
         segmentColor:'blue',
         data: samples.boxplots({count: 7, random: random}).map((x)=>{
             x.segment = 45;
             return x
         }),
-        outlierColor: '#999999',
-        lowerColor: '#461e7d'
-      }, {
-        label: 'Dataset 2',
-        backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
-        borderColor: window.chartColors.blue,
-        borderWidth: 1,
-        data: samples.boxplotsArray({count: 7, random: random}),
-        outlierColor: '#999999',
-        lowerColor: '#461e7d'
+        outlierColor: '#999999'
       }]
 
     };

src/controllers/base.js

@@ -26,7 +26,7 @@ export function toFixed(value) {
 }
 
 const configKeys = ['outlierRadius', 'itemRadius', 'itemStyle', 'itemBackgroundColor', 'itemBorderColor', 'outlierColor', 'medianColor', 'segmentColor', 'hitPadding', 'outlierHitRadius', 'lowerColor'];
-const configKeyIsColor = [false, false, false, true, true, true, true, false, false, true];
+const configKeyIsColor = [false, false, false, true, true, true, true, true, false, false, true];
 
 const array = {
   _elementOptions() {

src/elements/boxandwhiskers.js

@@ -104,6 +104,8 @@ const BoxAndWiskers = Chart.elements.BoxAndWhiskers = ArrayElementBase.extend({
     ctx.beginPath();
     ctx.moveTo(x0, boxplot.median);
     ctx.lineTo(x0 + width, boxplot.median);
+    ctx.closePath();
+    ctx.stroke();
 
     // Draw the segment line
     if (boxplot.segment != null) {
@@ -113,8 +115,8 @@ const BoxAndWiskers = Chart.elements.BoxAndWhiskers = ArrayElementBase.extend({
       ctx.beginPath();
       ctx.moveTo(x0, boxplot.segment);
       ctx.lineTo(x0 + width, boxplot.segment);
+      ctx.closePath();
     }
-
     // fill the part below the median with lowerColor
     if (vm.lowerColor) {
       ctx.fillStyle = vm.lowerColor;