(feature) Added separate top and bottom padding for title plugin. (#6852)

* (feature) Added separate top and bottom padding for title plugin.

* Added regular padding multiplier like how it was before.

* Now makes use of toPadding helper.
Fixed typo in toPadding helper.

* Fixed requested changes.

diff --git a/docs/configuration/title.md b/docs/configuration/title.md
index f7033790d1f95adb0776f33b839afee87f02bf7f..faf722ce01166164dec73a04f722d8542293ed33 100644 (file)
--- a/docs/configuration/title.md
+++ b/docs/configuration/title.md
@@ -13,7 +13,7 @@ The title configuration is passed into the `options.title` namespace. The global
 | `fontFamily` | `string` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family for the title text.
 | `fontColor` | `Color` | `'#666'` | Font color.
 | `fontStyle` | `string` | `'bold'` | Font style.
-| `padding` | `number` | `10` | Number of pixels to add above and below the title text.
+| `padding` | <code>number&#124;{top: number, bottom: number}</code> | `10` | Adds padding above and below the title text if a single number is specified. It is also possible to change top and bottom padding separately.
 | `lineHeight` | <code>number&#124;string</code> | `1.2` | Height of an individual line of text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height).
 | `text` | <code>string&#124;string[]</code> | `''` | Title text to display. If specified as an array, text is rendered on multiple lines.
 
@@ -40,3 +40,22 @@ var chart = new Chart(ctx, {
     }
 });
 ```
+
+This example shows how to specify separate top and bottom title text padding:
+
+```javascript
+var chart = new Chart(ctx, {
+    type: 'line',
+    data: data,
+    options: {
+        title: {
+            display: true,
+            text: 'Custom Chart Title',
+            padding: {
+                top: 10,
+                bottom: 30
+            }
+        }
+    }
+});
+```

diff --git a/src/helpers/helpers.options.js b/src/helpers/helpers.options.js
index e2dbf5870717d73fc8199fb246e17223e03f7eaa..375c361b2c6bc29c728d10ca9ede9035bf341c8d 100644 (file)
--- a/src/helpers/helpers.options.js
+++ b/src/helpers/helpers.options.js
@@ -56,7 +56,7 @@ export function toLineHeight(value, size) {
 /**
  * Converts the given value into a padding object with pre-computed width/height.
  * @param {number|object} value - If a number, set the value to all TRBL component,
- *  else, if and object, use defined properties and sets undefined ones to 0.
+ *  else, if an object, use defined properties and sets undefined ones to 0.
  * @returns {object} The padding values (top, right, bottom, left, width, height)
  * @since 2.7.0
  */

diff --git a/src/plugins/plugin.title.js b/src/plugins/plugin.title.js
index 158d023c70257bfa057a2e0cebc203317627ff41..c894e13c0732f4a50386a4617a27214d05ced1ec 100644 (file)
--- a/src/plugins/plugin.title.js
+++ b/src/plugins/plugin.title.js
@@ -18,7 +18,7 @@ defaults._set('global', {
 });
 
 /**
- * IMPORTANT: this class is exposed publicly as Chart.Legend, backward compatibility required!
+ * IMPORTANT: this class is exposed publicly as Chart.Title, backward compatibility required!
  */
 class Title extends Element {
        constructor(config) {
@@ -85,12 +85,6 @@ class Title extends Element {
                        me.bottom = me.height;
                }
 
-               // Reset padding
-               me.paddingLeft = 0;
-               me.paddingTop = 0;
-               me.paddingRight = 0;
-               me.paddingBottom = 0;
-
                // Reset minSize
                me.minSize = {
                        width: 0,
@@ -121,8 +115,8 @@ class Title extends Element {
                }
 
                lineCount = helpers.isArray(opts.text) ? opts.text.length : 1;
-               textSize = lineCount * helpers.options._parseFont(opts).lineHeight + opts.padding * 2;
-
+               me._padding = helpers.options.toPadding(opts.padding);
+               textSize = lineCount * helpers.options._parseFont(opts).lineHeight + me._padding.height;
                me.width = minSize.width = isHorizontal ? me.maxWidth : textSize;
                me.height = minSize.height = isHorizontal ? textSize : me.maxHeight;
        }
@@ -146,7 +140,7 @@ class Title extends Element {
 
                var fontOpts = helpers.options._parseFont(opts);
                var lineHeight = fontOpts.lineHeight;
-               var offset = lineHeight / 2 + opts.padding;
+               var offset = lineHeight / 2 + me._padding.top;
                var rotation = 0;
                var top = me.top;
                var left = me.left;