Merge pull request #72 from datavisyn/release-2.3.0

Release 2.3.0

.github/CODEOWNERS

@@ -0,0 +1 @@
+*   @dg-datavisyn

README.md

@@ -79,6 +79,14 @@ interface IBaseStyling {
    */
   outlierColor: string;
 
+  /**
+   * to fill color below the median line of the box
+   * @default see rectangle.lowerColor
+   * @scriptable
+   * @indexable
+   */
+  lowerColor: string;
+
   /**
    * radius used to render items
    * @default 0 so disabled

package.json

@@ -1,14 +1,13 @@
 {
   "name": "chartjs-chart-box-and-violin-plot",
   "description": "Chart.js module for charting boxplots",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "author": {
     "name": "datavisyn",
     "email": "[email protected]",
     "url": "https://www.datavisyn.io"
   },
-  "contributors": [
-    {
+  "contributors": [{
       "name": "Samuel Gratzl",
       "email": "[email protected]",
       "url": "https://www.sgratzl.com"

samples/vertical.html

@@ -38,14 +38,16 @@
         borderColor: window.chartColors.red,
         borderWidth: 1,
         data: samples.boxplots({count: 7, random: random}),
-        outlierColor: '#999999'
+        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'
+        outlierColor: '#999999',
+        lowerColor: '#461e7d'
       }]
 
     };

src/controllers/base.js

@@ -25,8 +25,8 @@ export function toFixed(value) {
   return Number.parseFloat(value).toFixed(decimals);
 }
 
-const configKeys = ['outlierRadius', 'itemRadius', 'itemStyle', 'itemBackgroundColor', 'itemBorderColor', 'outlierColor', 'medianColor', 'hitPadding', 'outlierHitRadius'];
-const configKeyIsColor = [false, false, false, true, true, true, true, false, false];
+const configKeys = ['outlierRadius', 'itemRadius', 'itemStyle', 'itemBackgroundColor', 'itemBorderColor', 'outlierColor', 'medianColor', 'hitPadding', 'outlierHitRadius', 'lowerColor'];
+const configKeyIsColor = [false, false, false, true, true, true, true, false, false, true];
 
 const array = {
   _elementOptions() {

src/elements/base.js

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

src/elements/boxandwhiskers.js

@@ -104,6 +104,17 @@ const BoxAndWiskers = Chart.elements.BoxAndWhiskers = ArrayElementBase.extend({
     ctx.beginPath();
     ctx.moveTo(x0, boxplot.median);
     ctx.lineTo(x0 + width, boxplot.median);
+
+    // fill the part below the median with lowerColor
+    if (vm.lowerColor) {
+      ctx.fillStyle = vm.lowerColor;
+      if (boxplot.q3 > boxplot.q1) {
+        ctx.fillRect(x0, boxplot.median, width, boxplot.q3 - boxplot.median);
+      } else {
+        ctx.fillRect(x0, boxplot.median, width, boxplot.q1 - boxplot.median);
+      }
+    }
+
     ctx.closePath();
     ctx.stroke();
     ctx.restore();