From 1d35ebb29007e249952e93c1bbdff0bb6b404af1 Mon Sep 17 00:00:00 2001
From: SansDK <kenvangrinsven@live.nl>
Date: Fri, 20 Dec 2019 14:21:20 +0100
Subject: [PATCH] (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.
---
 docs/configuration/title.md    | 21 ++++++++++++++++++++-
 src/helpers/helpers.options.js |  2 +-
 src/plugins/plugin.title.js    | 14 ++++----------
 3 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/docs/configuration/title.md b/docs/configuration/title.md
index f7033790d..faf722ce0 100644
--- 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 e2dbf5870..375c361b2 100644
--- 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 158d023c7..c894e13c0 100644
--- 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;
-- 
2.47.2