Fix bar direction when minBarLength is applied (#9400)

src/controllers/controller.bar.js

@@ -170,6 +170,13 @@ function isFloatBar(custom) {
   return custom && custom.barStart !== undefined && custom.barEnd !== undefined;
 }
 
+function barSign(size, vScale, actualBase) {
+  if (size !== 0) {
+    return sign(size);
+  }
+  return (vScale.isHorizontal() ? 1 : -1) * (vScale.min >= actualBase ? 1 : -1);
+}
+
 export default class BarController extends DatasetController {
 
   /**
@@ -426,8 +433,8 @@ export default class BarController extends DatasetController {
 	 */
   _calculateBarValuePixels(index) {
     const me = this;
-    const {vScale, _stacked} = me._cachedMeta;
-    const {base: baseValue, minBarLength} = me.options;
+    const {_cachedMeta: {vScale, _stacked}, options: {base: baseValue, minBarLength}} = me;
+    const actualBase = baseValue || 0;
     const parsed = me.getParsed(index);
     const custom = parsed._custom;
     const floating = isFloatBar(custom);
@@ -454,7 +461,7 @@ export default class BarController extends DatasetController {
     const startValue = !isNullOrUndef(baseValue) && !floating ? baseValue : start;
     let base = vScale.getPixelForValue(startValue);
 
-    if (this.chart.getDataVisibility(index)) {
+    if (me.chart.getDataVisibility(index)) {
       head = vScale.getPixelForValue(start + length);
     } else {
       // When not visible, no height
@@ -463,24 +470,18 @@ export default class BarController extends DatasetController {
 
     size = head - base;
 
-    if (minBarLength !== undefined && Math.abs(size) < minBarLength) {
-      size = size < 0 ? -minBarLength : minBarLength;
-      if (value === 0) {
+    if (Math.abs(size) < minBarLength) {
+      size = barSign(size, vScale, actualBase) * minBarLength;
+      if (value === actualBase) {
         base -= size / 2;
       }
       head = base + size;
     }
 
-    const actualBase = baseValue || 0;
     if (base === vScale.getPixelForValue(actualBase)) {
-      const halfGrid = vScale.getLineWidthForValue(actualBase) / 2;
-      if (size > 0) {
-        base += halfGrid;
-        size -= halfGrid;
-      } else if (size < 0) {
-        base -= halfGrid;
-        size += halfGrid;
-      }
+      const halfGrid = sign(size) * vScale.getLineWidthForValue(actualBase) / 2;
+      base += halfGrid;
+      size -= halfGrid;
     }
 
     return {

test/fixtures/controller.bar/minBarLength/horizontal-neg.js

@@ -7,7 +7,8 @@ module.exports = {
         {
           data: [0, -0.01, -30],
           backgroundColor: '#00ff00',
-          borderWidth: 0,
+          borderColor: '#000',
+          borderWidth: 4,
           minBarLength: 20
         }
       ]

test/fixtures/controller.bar/minBarLength/horizontal-pos.js

@@ -7,7 +7,8 @@ module.exports = {
         {
           data: [0, 0.01, 30],
           backgroundColor: '#00ff00',
-          borderWidth: 0,
+          borderColor: '#000',
+          borderWidth: 4,
           minBarLength: 20
         }
       ]

test/fixtures/controller.bar/minBarLength/horizontal.js

@@ -7,7 +7,9 @@ module.exports = {
         {
           data: [0, -0.01, 0.01, 30, -30],
           backgroundColor: '#00ff00',
-          borderWidth: 0,
+          borderColor: '#000',
+          borderSkipped: ctx => ctx.raw === 0 ? false : 'start',
+          borderWidth: 4,
           minBarLength: 20
         }
       ]

test/fixtures/controller.bar/minBarLength/vertical-neg.js

@@ -7,7 +7,8 @@ module.exports = {
         {
           data: [0, -0.01, -30],
           backgroundColor: '#00ff00',
-          borderWidth: 0,
+          borderColor: '#000',
+          borderWidth: 4,
           minBarLength: 20
         }
       ]

test/fixtures/controller.bar/minBarLength/vertical-pos.js

@@ -7,7 +7,8 @@ module.exports = {
         {
           data: [0, 0.01, 30],
           backgroundColor: '#00ff00',
-          borderWidth: 0,
+          borderColor: '#000',
+          borderWidth: 4,
           minBarLength: 20
         }
       ]

test/fixtures/controller.bar/minBarLength/vertical.js

@@ -7,7 +7,9 @@ module.exports = {
         {
           data: [0, -0.01, 0.01, 30, -30],
           backgroundColor: '#00ff00',
-          borderWidth: 0,
+          borderColor: '#000',
+          borderSkipped: ctx => ctx.raw === 0 ? false : 'start',
+          borderWidth: 4,
           minBarLength: 20
         }
       ]