From: Jukka Kurkela <jukka.kurkela@gmail.com>
Date: Mon, 4 Oct 2021 18:01:10 +0000 (+0300)
Subject: Add layout.autoPadding option (#9716)
X-Git-Tag: v3.6.0~20
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=e1ae5e6abf0a6222d348e78c3cedebf6279ed5d6;p=thirdparty%2FChart.js.git

Add layout.autoPadding option (#9716)
---

diff --git a/docs/configuration/layout.md b/docs/configuration/layout.md
index aad50c62d..9cce25644 100644
--- 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 c5b77a0f9..33ba6734c 100644
--- 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 fd830ffc3..c5c7e4674 100644
--- 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
index 000000000..bc0d166cc
--- /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
index 000000000..deed2ff4f
Binary files /dev/null and b/test/fixtures/controller.bubble/autoPadding-disabled.png differ