Linear: determine grace amount from range (#9719)

src/core/core.scale.js

@@ -387,7 +387,7 @@ export default class Scale extends Element {
 	 *     - thickness of scales or legends in another orientation
 	 */
   update(maxWidth, maxHeight, margins) {
-    const tickOpts = this.options.ticks;
+    const {beginAtZero, grace, ticks: tickOpts} = this.options;
     const sampleSize = tickOpts.sampleSize;
 
     // Update Lifecycle - Probably don't want to ever extend or overwrite this function ;)
@@ -422,7 +422,7 @@ export default class Scale extends Element {
       this.beforeDataLimits();
       this.determineDataLimits();
       this.afterDataLimits();
-      this._range = _addGrace(this, this.options.grace);
+      this._range = _addGrace(this, grace, beginAtZero);
       this._dataLimitsCached = true;
     }
 

src/helpers/helpers.options.js

@@ -172,12 +172,15 @@ export function resolve(inputs, context, index, info) {
 /**
  * @param {{min: number, max: number}} minmax
  * @param {number|string} grace
+ * @param {boolean} beginAtZero
  * @private
  */
-export function _addGrace(minmax, grace) {
+export function _addGrace(minmax, grace, beginAtZero) {
   const {min, max} = minmax;
+  const change = toDimension(grace, (max - min) / 2);
+  const keepZero = (value, add) => beginAtZero && value === 0 ? 0 : value + add;
   return {
-    min: min - Math.abs(toDimension(grace, min)),
-    max: max + toDimension(grace, max)
+    min: keepZero(min, -Math.abs(change)),
+    max: keepZero(max, change)
   };
 }

test/fixtures/scale.linear/grace/grace-10%.js

@@ -0,0 +1,29 @@
+module.exports = {
+  config: {
+    type: 'bar',
+    data: {
+      labels: ['a', 'b'],
+      datasets: [{
+        data: [90, -10],
+      }],
+    },
+    options: {
+      indexAxis: 'y',
+      scales: {
+        y: {
+          display: false
+        },
+        x: {
+          grace: '10%'
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true,
+    canvas: {
+      width: 512,
+      height: 128
+    }
+  }
+};

test/fixtures/scale.linear/grace/grace-beginAtZero.js

@@ -0,0 +1,42 @@
+module.exports = {
+  config: {
+    type: 'bar',
+    data: {
+      labels: ['a', 'b'],
+      datasets: [{
+        data: [100, 0],
+        backgroundColor: 'blue'
+      }, {
+        xAxisID: 'x2',
+        data: [0, 100],
+        backgroundColor: 'red'
+      }],
+    },
+    options: {
+      indexAxis: 'y',
+      scales: {
+        y: {
+          display: false
+        },
+        x: {
+          position: 'top',
+          beginAtZero: true,
+          grace: '10%',
+        },
+        x2: {
+          position: 'bottom',
+          type: 'linear',
+          beginAtZero: false,
+          grace: '10%',
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true,
+    canvas: {
+      width: 512,
+      height: 128
+    }
+  }
+};

test/fixtures/scale.linear/grace/grace-neg.js

@@ -1,5 +1,4 @@
 module.exports = {
-  description: 'https://github.com/chartjs/Chart.js/issues/7734',
   config: {
     type: 'bar',
     data: {

test/fixtures/scale.linear/grace/grace-pos.js

@@ -1,5 +1,4 @@
 module.exports = {
-  description: 'https://github.com/chartjs/Chart.js/issues/7734',
   config: {
     type: 'bar',
     data: {

test/fixtures/scale.linear/grace/grace.js

@@ -1,5 +1,4 @@
 module.exports = {
-  description: 'https://github.com/chartjs/Chart.js/issues/7734',
   config: {
     type: 'bar',
     data: {