diff --git a/docs/configuration/layout.md b/docs/configuration/layout.md index aad50c62d35..9cce256448f 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 c5b77a0f989..33ba6734ce7 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 fd830ffc3d7..c5c7e46749f 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 00000000000..bc0d166cc24 --- /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 00000000000..deed2ff4f72 Binary files /dev/null and b/test/fixtures/controller.bubble/autoPadding-disabled.png differ