Add layout.autoPadding option (#9716)

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.

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

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,

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
+    }
+  }
+};