From de0ea5c6bacaba416216134f598cea8dd419cdb1 Mon Sep 17 00:00:00 2001
From: etimberg <evert.timberg@gmail.com>
Date: Thu, 15 Jun 2017 18:55:01 -0400
Subject: [PATCH] Multiple lines of text in the chart title

---
 docs/configuration/title.md      |  3 ++-
 src/plugins/plugin.title.js      | 23 +++++++++++++++++++----
 test/specs/plugin.title.tests.js | 22 ++++++++++++++++++++++
 3 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/docs/configuration/title.md b/docs/configuration/title.md
index 66985d692..3952f2ca6 100644
--- a/docs/configuration/title.md
+++ b/docs/configuration/title.md
@@ -14,7 +14,8 @@ The title configuration is passed into the `options.title` namespace. The global
 | `fontColor` | Color | `'#666'` | Font color
 | `fontStyle` | `String` | `'bold'` | Font style
 | `padding` | `Number` | `10` | Number of pixels to add above and below the title text.
-| `text` | `String` | `''` | Title text to display
+| `lineHeight` | `Number` | `undefined` | Height of line of text. If not specified, the `fontSize` is used.
+| `text` | `String/String[]`  | `''` | Title text to display. If specified as an array, text is rendered on multiple lines.
 
 ### Position
 Possible title position values are:
diff --git a/src/plugins/plugin.title.js b/src/plugins/plugin.title.js
index b4c194a46..4fd602bcd 100644
--- a/src/plugins/plugin.title.js
+++ b/src/plugins/plugin.title.js
@@ -111,13 +111,16 @@ module.exports = function(Chart) {
 				globalDefaults = Chart.defaults.global,
 				display = opts.display,
 				fontSize = valueOrDefault(opts.fontSize, globalDefaults.defaultFontSize),
-				minSize = me.minSize;
+				minSize = me.minSize,
+				lineCount = helpers.isArray(opts.text) ? opts.text.length : 1,
+				lineHeight = valueOrDefault(opts.lineHeight, fontSize),
+				textSize = display ? (lineCount * lineHeight) + (opts.padding * 2) : 0;
 
 			if (me.isHorizontal()) {
 				minSize.width = me.maxWidth; // fill all the width
-				minSize.height = display ? fontSize + (opts.padding * 2) : 0;
+				minSize.height = textSize;
 			} else {
-				minSize.width = display ? fontSize + (opts.padding * 2) : 0;
+				minSize.width = textSize;
 				minSize.height = me.maxHeight; // fill all the height
 			}
 
@@ -146,6 +149,7 @@ module.exports = function(Chart) {
 					fontStyle = valueOrDefault(opts.fontStyle, globalDefaults.defaultFontStyle),
 					fontFamily = valueOrDefault(opts.fontFamily, globalDefaults.defaultFontFamily),
 					titleFont = helpers.fontString(fontSize, fontStyle, fontFamily),
+					lineHeight = valueOrDefault(opts.lineHeight, fontSize),
 					rotation = 0,
 					titleX,
 					titleY,
@@ -175,7 +179,18 @@ module.exports = function(Chart) {
 				ctx.rotate(rotation);
 				ctx.textAlign = 'center';
 				ctx.textBaseline = 'middle';
-				ctx.fillText(opts.text, 0, 0, maxWidth);
+
+				var text = opts.text;
+				if (helpers.isArray(text)) {
+					var y = 0;
+					for (var i = 0; i < text.length; ++i) {
+						ctx.fillText(text[i], 0, y, maxWidth);
+						y += lineHeight;
+					}
+				} else {
+					ctx.fillText(text, 0, 0, maxWidth);
+				}
+
 				ctx.restore();
 			}
 		}
diff --git a/test/specs/plugin.title.tests.js b/test/specs/plugin.title.tests.js
index 686e9f5e0..3c73b55d4 100644
--- a/test/specs/plugin.title.tests.js
+++ b/test/specs/plugin.title.tests.js
@@ -77,6 +77,28 @@ describe('Title block tests', function() {
 		});
 	});
 
+	it('should have the correct size when there are multiple lines of text', function() {
+		var chart = {};
+
+		var options = Chart.helpers.clone(Chart.defaults.global.title);
+		options.text = ['line1', 'line2'];
+		options.position = 'left';
+		options.display = true;
+		options.lineHeight = 15;
+
+		var title = new Chart.Title({
+			chart: chart,
+			options: options
+		});
+
+		var minSize = title.update(200, 400);
+
+		expect(minSize).toEqual({
+			width: 50,
+			height: 400
+		});
+	});
+
 	it('should draw correctly horizontally', function() {
 		var chart = {};
 		var context = window.createMockContext();
-- 
2.47.3