Add layout.autoPadding option (#9716)

diff --git a/docs/configuration/layout.md b/docs/configuration/layout.md
index aad50c62d35159160dbf33083ee76acf71e0ff13..9cce256448f105abda242e6a67fda80d89d50c75 100644 (file)
--- a/docs/configuration/layout.md
+++ b/docs/configuration/layout.md
@@ -4,4 +4,5 @@ Namespace: `options.layout`, the global options for the chart layout is defined
 
 | Name | Type | Default | [Scriptable](../general/options.md#scriptable-options) | Description
 | ---- | ---- | ------- | :----: | -----------
+| `autoPadding` | `boolean` | `true` | No | Apply automatic padding so visible elements are completely drawn.
 | `padding` | [`Padding`](../general/padding.md) | `0` | Yes | The padding to add inside the chart.

diff --git a/src/core/core.controller.js b/src/core/core.controller.js
index c5b77a0f98981de75b874a22fd7d2387a91c0777..33ba6734ce786695b518ed4cbdb54d9f64e3f9f7 100644 (file)
--- a/src/core/core.controller.js
+++ b/src/core/core.controller.js
@@ -422,21 +422,21 @@ class Chart {
     const config = this.config;
 
     config.update();
-    this._options = config.createResolver(config.chartOptionScopes(), this.getContext());
+    const options = this._options = config.createResolver(config.chartOptionScopes(), this.getContext());
 
     each(this.scales, (scale) => {
       layouts.removeBox(this, scale);
     });
 
-    const animsDisabled = this._animationsDisabled = !this.options.animation;
+    const animsDisabled = this._animationsDisabled = !options.animation;
 
     this.ensureScalesHaveIDs();
     this.buildOrUpdateScales();
 
     const existingEvents = new Set(Object.keys(this._listeners));
-    const newEvents = new Set(this.options.events);
+    const newEvents = new Set(options.events);
 
-    if (!setsEqual(existingEvents, newEvents) || !!this._responsiveListeners !== this.options.responsive) {
+    if (!setsEqual(existingEvents, newEvents) || !!this._responsiveListeners !== options.responsive) {
       // The configured events have changed. Rebind.
       this.unbindEvents();
       this.bindEvents();
@@ -465,7 +465,7 @@ class Chart {
       controller.buildOrUpdateElements(reset);
       minPadding = Math.max(+controller.getMaxOverflow(), minPadding);
     }
-    this._minPadding = minPadding;
+    minPadding = this._minPadding = options.layout.autoPadding ? minPadding : 0;
     this._updateLayout(minPadding);
 
     // Only reset the controllers if we have animations

diff --git a/src/core/core.layouts.js b/src/core/core.layouts.js
index fd830ffc3d7a5d39fff89fc488e1d9bc8120e182..c5c7e46749f11fa16c40c75bb40c2239b8d2ec26 100644 (file)
--- a/src/core/core.layouts.js
+++ b/src/core/core.layouts.js
@@ -260,6 +260,7 @@ function placeBoxes(boxes, chartArea, params, stacks) {
 }
 
 defaults.set('layout', {
+  autoPadding: true,
   padding: {
     top: 0,
     right: 0,

diff --git a/test/fixtures/controller.bubble/autoPadding-disabled.js b/test/fixtures/controller.bubble/autoPadding-disabled.js
new file mode 100644 (file)
index 0000000..bc0d166
--- /dev/null
+++ b/test/fixtures/controller.bubble/autoPadding-disabled.js
@@ -0,0 +1,26 @@
+module.exports = {
+  config: {
+    type: 'bubble',
+    data: {
+      datasets: [{
+        backgroundColor: 'red',
+        data: [{x: 12, y: 54, r: 22.4}]
+      }, {
+        backgroundColor: 'blue',
+        data: [{x: 18, y: 38, r: 25}]
+      }]
+    },
+    options: {
+      layout: {
+        autoPadding: false,
+      }
+    }
+  },
+  options: {
+    spriteText: true,
+    canvas: {
+      width: 256,
+      height: 256
+    }
+  }
+};

diff --git a/test/fixtures/controller.bubble/autoPadding-disabled.png b/test/fixtures/controller.bubble/autoPadding-disabled.png
new file mode 100644 (file)
index 0000000..deed2ff
Binary files /dev/null and b/test/fixtures/controller.bubble/autoPadding-disabled.png differ