Multiple lines of text in the chart title

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
+| `lineSpacing` | `Number` | `5` | Number of pixels between lines of the text when `text` is specified as an array of strings.
+| `text` | `String/String[]`  | `''` | Title text to display. If specified as an array, text is rendered on multiple lines.
 
 ### Position
 Possible title position values are:

src/plugins/plugin.title.js

@@ -13,6 +13,7 @@ module.exports = function(Chart) {
 		weight: 2000,        // by default greater than legend (1000) to be above
 		fontStyle: 'bold',
 		padding: 10,
+		lineSpacing: 5,
 
 		// actual title
 		text: ''
@@ -111,13 +112,15 @@ 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,
+				textSize = display ? (lineCount * fontSize) + (opts.padding * 2) + (opts.lineSpacing * (lineCount - 1)) : 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
 			}
 
@@ -175,7 +178,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 += opts.lineSpacing + fontSize;
+					}
+				} else {
+					ctx.fillText(text, 0, 0, maxWidth);
+				}
+
 				ctx.restore();
 			}
 		}

test/specs/plugin.title.tests.js

@@ -14,6 +14,7 @@ describe('Title block tests', function() {
 			weight: 2000,
 			fontStyle: 'bold',
 			padding: 10,
+			lineSpacing: 5,
 			text: ''
 		});
 	});
@@ -77,6 +78,27 @@ 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;
+
+		var title = new Chart.Title({
+			chart: chart,
+			options: options
+		});
+
+		var minSize = title.update(200, 400);
+
+		expect(minSize).toEqual({
+			width: 49,
+			height: 400
+		});
+	});
+
 	it('should draw correctly horizontally', function() {
 		var chart = {};
 		var context = window.createMockContext();