Exclude base-line from bar size (#8648)

* Exclude base-line from bar size

* lint

* add to types

src/controllers/controller.bar.js

@@ -447,6 +447,18 @@ export default class BarController extends DatasetController {
       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;
+      }
+    }
+
     return {
       size,
       base,

src/core/core.scale.js

@@ -1606,6 +1606,21 @@ export default class Scale extends Element {
     }
   }
 
+  getLineWidthForValue(value) {
+    const me = this;
+    const grid = me.options.grid;
+    if (!me._isVisible() || !grid.display) {
+      return 0;
+    }
+    const ticks = me.ticks;
+    const index = ticks.findIndex(t => t.value === value);
+    if (index >= 0) {
+      const opts = grid.setContext(me.getContext(index));
+      return opts.lineWidth;
+    }
+    return 0;
+  }
+
   /**
 	 * @protected
 	 */

test/fixtures/controller.bar/baseLine/bottom.js

@@ -0,0 +1,40 @@
+module.exports = {
+  config: {
+    type: 'bar',
+    data: {
+      labels: ['a', 'b'],
+      datasets: [{
+        backgroundColor: '#AAFFCC',
+        borderColor: '#0000FF',
+        borderWidth: 1,
+        data: [1, 2]
+      }]
+    },
+    options: {
+      scales: {
+        x: {
+          display: false
+        },
+        y: {
+          ticks: {
+            display: false
+          },
+          grid: {
+            color: function(context) {
+              return context.tick.value === 0 ? 'red' : 'transparent';
+            },
+            lineWidth: 5,
+            tickLength: 0
+          },
+        }
+      },
+      maintainAspectRatio: false
+    }
+  },
+  options: {
+    canvas: {
+      width: 128,
+      height: 128
+    }
+  }
+};

test/fixtures/controller.bar/baseLine/left.js

@@ -0,0 +1,41 @@
+module.exports = {
+  config: {
+    type: 'bar',
+    data: {
+      labels: ['a', 'b'],
+      datasets: [{
+        backgroundColor: '#AAFFCC',
+        borderColor: '#0000FF',
+        borderWidth: 1,
+        data: [1, 2]
+      }]
+    },
+    options: {
+      indexAxis: 'y',
+      scales: {
+        y: {
+          display: false
+        },
+        x: {
+          ticks: {
+            display: false
+          },
+          grid: {
+            color: function(context) {
+              return context.tick.value === 0 ? 'red' : 'transparent';
+            },
+            lineWidth: 5,
+            tickLength: 0
+          },
+        }
+      },
+      maintainAspectRatio: false
+    }
+  },
+  options: {
+    canvas: {
+      width: 128,
+      height: 128
+    }
+  }
+};

test/fixtures/controller.bar/baseLine/mid-x.js

@@ -0,0 +1,41 @@
+module.exports = {
+  config: {
+    type: 'bar',
+    data: {
+      labels: ['a', 'b'],
+      datasets: [{
+        backgroundColor: '#AAFFCC',
+        borderColor: '#0000FF',
+        borderWidth: 1,
+        data: [1, -1]
+      }]
+    },
+    options: {
+      indexAxis: 'y',
+      scales: {
+        y: {
+          display: false
+        },
+        x: {
+          ticks: {
+            display: false
+          },
+          grid: {
+            color: function(context) {
+              return context.tick.value === 0 ? 'red' : 'transparent';
+            },
+            lineWidth: 5,
+            tickLength: 0
+          },
+        }
+      },
+      maintainAspectRatio: false
+    }
+  },
+  options: {
+    canvas: {
+      width: 128,
+      height: 128
+    }
+  }
+};

test/fixtures/controller.bar/baseLine/mid-y.js

@@ -0,0 +1,40 @@
+module.exports = {
+  config: {
+    type: 'bar',
+    data: {
+      labels: ['a', 'b'],
+      datasets: [{
+        backgroundColor: '#AAFFCC',
+        borderColor: '#0000FF',
+        borderWidth: 1,
+        data: [1, -1]
+      }]
+    },
+    options: {
+      scales: {
+        x: {
+          display: false
+        },
+        y: {
+          ticks: {
+            display: false
+          },
+          grid: {
+            color: function(context) {
+              return context.tick.value === 0 ? 'red' : 'transparent';
+            },
+            lineWidth: 5,
+            tickLength: 0
+          },
+        }
+      },
+      maintainAspectRatio: false
+    }
+  },
+  options: {
+    canvas: {
+      width: 128,
+      height: 128
+    }
+  }
+};

test/fixtures/controller.bar/baseLine/right.js

@@ -0,0 +1,42 @@
+module.exports = {
+  config: {
+    type: 'bar',
+    data: {
+      labels: ['a', 'b'],
+      datasets: [{
+        backgroundColor: '#AAFFCC',
+        borderColor: '#0000FF',
+        borderWidth: 1,
+        data: [-1, -2]
+      }]
+    },
+    options: {
+      indexAxis: 'y',
+      scales: {
+        y: {
+          display: false
+        },
+        x: {
+          ticks: {
+            display: false
+          },
+          grid: {
+            color: function(context) {
+              return context.tick.value === 0 ? 'red' : 'transparent';
+            },
+            lineWidth: 5,
+            tickLength: 0,
+            borderWidth: 0
+          },
+        }
+      },
+      maintainAspectRatio: false
+    }
+  },
+  options: {
+    canvas: {
+      width: 128,
+      height: 128
+    }
+  }
+};

test/fixtures/controller.bar/baseLine/top.js

@@ -0,0 +1,41 @@
+module.exports = {
+  config: {
+    type: 'bar',
+    data: {
+      labels: ['a', 'b'],
+      datasets: [{
+        backgroundColor: '#AAFFCC',
+        borderColor: '#0000FF',
+        borderWidth: 1,
+        data: [-1, -2]
+      }]
+    },
+    options: {
+      scales: {
+        x: {
+          display: false
+        },
+        y: {
+          ticks: {
+            display: false
+          },
+          grid: {
+            color: function(context) {
+              return context.tick.value === 0 ? 'red' : 'transparent';
+            },
+            borderWidth: 0,
+            lineWidth: 5,
+            tickLength: 0
+          },
+        }
+      },
+      maintainAspectRatio: false
+    }
+  },
+  options: {
+    canvas: {
+      width: 128,
+      height: 128
+    }
+  }
+};

test/fixtures/controller.bar/baseLine/value-x.js

@@ -0,0 +1,42 @@
+module.exports = {
+  config: {
+    type: 'bar',
+    data: {
+      labels: ['a', 'b'],
+      datasets: [{
+        backgroundColor: '#AAFFCC',
+        borderColor: '#0000FF',
+        borderWidth: 1,
+        data: [1, 3]
+      }]
+    },
+    options: {
+      base: 2,
+      indexAxis: 'y',
+      scales: {
+        y: {
+          display: false
+        },
+        x: {
+          ticks: {
+            display: false
+          },
+          grid: {
+            color: function(context) {
+              return context.tick.value === 2 ? 'red' : 'transparent';
+            },
+            lineWidth: 5,
+            tickLength: 0
+          },
+        }
+      },
+      maintainAspectRatio: false
+    }
+  },
+  options: {
+    canvas: {
+      width: 128,
+      height: 128
+    }
+  }
+};

test/fixtures/controller.bar/baseLine/value-y.js

@@ -0,0 +1,41 @@
+module.exports = {
+  config: {
+    type: 'bar',
+    data: {
+      labels: ['a', 'b'],
+      datasets: [{
+        backgroundColor: '#AAFFCC',
+        borderColor: '#0000FF',
+        borderWidth: 1,
+        data: [1, 3]
+      }]
+    },
+    options: {
+      base: 2,
+      scales: {
+        x: {
+          display: false
+        },
+        y: {
+          ticks: {
+            display: false
+          },
+          grid: {
+            color: function(context) {
+              return context.tick.value === 2 ? 'red' : 'transparent';
+            },
+            lineWidth: 5,
+            tickLength: 0
+          },
+        }
+      },
+      maintainAspectRatio: false
+    }
+  },
+  options: {
+    canvas: {
+      width: 128,
+      height: 128
+    }
+  }
+};

test/specs/controller.bar.tests.js

@@ -1528,9 +1528,10 @@ describe('Chart.controllers.bar', function() {
     });
 
     var data = chart.getDatasetMeta(0).data;
+    var halfBaseLine = chart.scales.y.getLineWidthForValue(0) / 2;
 
-    expect(data[0].base - minBarLength).toEqual(data[0].y);
-    expect(data[1].base + minBarLength).toEqual(data[1].y);
+    expect(data[0].base - minBarLength + halfBaseLine).toEqual(data[0].y);
+    expect(data[1].base + minBarLength - halfBaseLine).toEqual(data[1].y);
   });
 
   it('minBarLength settings should be used on X axis on horizontal bar chart', function() {
@@ -1547,9 +1548,10 @@ describe('Chart.controllers.bar', function() {
     });
 
     var data = chart.getDatasetMeta(0).data;
+    var halfBaseLine = chart.scales.x.getLineWidthForValue(0) / 2;
 
-    expect(data[0].base + minBarLength).toEqual(data[0].x);
-    expect(data[1].base - minBarLength).toEqual(data[1].x);
+    expect(data[0].base + minBarLength - halfBaseLine).toEqual(data[0].x);
+    expect(data[1].base - minBarLength + halfBaseLine).toEqual(data[1].x);
   });
 
   it('should respect the data visibility settings', function() {

types/index.esm.d.ts

@@ -1199,6 +1199,12 @@ export interface Scale<O extends CoreScaleOptions = CoreScaleOptions> extends El
    * @return {string}
    */
   getLabelForValue(value: number): string;
+
+  /**
+   * Returns the grid line width at given value
+   */
+  getLineWidthForValue(value: number): number;
+
   /**
    * Returns the location of the given data point. Value can either be an index or a numerical value
    * The coordinate (0, 0) is at the upper-left corner of the canvas