number|object | `0` | The padding to add inside the chart. [more...](#padding)
+| Name | Type | Default | [Scriptable](../general/options.md#scriptable-options) | Description
+| ---- | ---- | ------- | :----: | -----------
+| `padding` | number|object | `0` | Yes | The padding to add inside the chart. [more...](#padding)
## Padding
If this value is a number, it is applied to all sides of the chart (left, top, right, bottom). If this value is an object, the `left` property defines the left padding. Similarly the `right`, `top` and `bottom` properties can also be specified.
diff --git a/src/core/core.layouts.js b/src/core/core.layouts.js
index 789731a30..61876c367 100644
--- a/src/core/core.layouts.js
+++ b/src/core/core.layouts.js
@@ -1,6 +1,6 @@
import defaults from './core.defaults';
import {each, isObject} from '../helpers/helpers.core';
-import {toPadding} from '../helpers/helpers.options';
+import {toPadding, resolve} from '../helpers/helpers.options';
/**
* @typedef { import("./core.controller").default } Chart
@@ -310,7 +310,8 @@ export default {
}
const layoutOptions = chart.options.layout || {};
- const padding = toPadding(layoutOptions.padding);
+ const context = {chart};
+ const padding = toPadding(resolve([layoutOptions.padding], context));
const availableWidth = width - padding.width;
const availableHeight = height - padding.height;
diff --git a/test/fixtures/core.layouts/scriptable.js b/test/fixtures/core.layouts/scriptable.js
new file mode 100644
index 000000000..3087398af
--- /dev/null
+++ b/test/fixtures/core.layouts/scriptable.js
@@ -0,0 +1,49 @@
+module.exports = {
+ config: {
+ type: 'line',
+ data: {
+ datasets: [
+ {data: [10, 5, 0, 25, 78, -10]}
+ ],
+ labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5', 'tick6']
+ },
+ options: {
+ layout: {
+ padding: function(ctx) {
+ // 10% padding
+ const horizontalPadding = ctx.chart.width * 0.1;
+ const verticalPadding = ctx.chart.height * 0.1;
+ return {
+ top: verticalPadding,
+ right: horizontalPadding,
+ bottom: verticalPadding,
+ left: horizontalPadding
+ };
+ }
+ },
+ legend: {
+ display: false
+ },
+ scales: {
+ x: {
+ type: 'category',
+ ticks: {
+ maxRotation: 0,
+ autoSkip: false
+ }
+ },
+ y: {
+ type: 'linear',
+ position: 'right'
+ }
+ }
+ }
+ },
+ options: {
+ spriteText: true,
+ canvas: {
+ height: 150,
+ width: 512
+ }
+ }
+};
diff --git a/test/fixtures/core.layouts/scriptable.png b/test/fixtures/core.layouts/scriptable.png
new file mode 100644
index 0000000000000000000000000000000000000000..6b3da5d1017fd376380aefccb626fa04e233b818
GIT binary patch
literal 12493
zcmb_@Wmr^E*Y=rVq@+VqT96O{m5u@FMkOVN5&>zXW28&zP8Aek2y_!+Z-*c
z`CEeW{MlPzJS-kk`fWzc8A5n%2L_C>eReRknZ&v^*GmS;c?Ru_7!m7bxW9@zPW9<=
z>(Xo~aB7azYs0@GRLKF{ZQPHWy@L?C#!aF~`IOJ;;e67