Multiple lines of text in the chart title

diff --git a/docs/configuration/title.md b/docs/configuration/title.md
index 66985d6924bbaa0ac212e810589caf904c0a3711..3952f2ca64ff79740a18712aaf879d567e09af7a 100644 (file)
--- 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 b4c194a46bd4611697bb14a5bf0afc9c32808234..4fd602bcd57b64da921d5fabf505af3dd1b701bd 100644 (file)
--- 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 686e9f5e0f41f760570bff59f80f17e5feb327da..3c73b55d4bca6e3408ef1fcf0136afe80b5f49fe 100644 (file)
--- 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();