From: dylan-kerr <dylan-kerr@users.noreply.github.com>
Date: Fri, 23 Sep 2016 21:05:54 +0000 (+0100)
Subject: Set maxWidth during title draw to avoid overflow
X-Git-Tag: v2.4.0~1^2~49^2~1
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=fb302d5f0074b5d367386319e696d5718b78a88d;p=thirdparty%2FChart.js.git

Set maxWidth during title draw to avoid overflow

CanvasRenderingContext2D.fillText() accepts a fourth parameter called maxWidth that sets the maximum width of the drawn text, enforced by scaling the entire line.

This commit uses the title element's layout dimensions to set maxWidth and avoid overflow outside of the canvas.
---

diff --git a/src/core/core.title.js b/src/core/core.title.js
index 0a8c1a5aa..eb9c4fc04 100644
--- a/src/core/core.title.js
+++ b/src/core/core.title.js
@@ -158,7 +158,8 @@ module.exports = function(Chart) {
 					top = me.top,
 					left = me.left,
 					bottom = me.bottom,
-					right = me.right;
+					right = me.right,
+					maxWidth;
 
 				ctx.fillStyle = valueOrDefault(opts.fontColor, globalDefaults.defaultFontColor); // render in correct colour
 				ctx.font = titleFont;
@@ -167,9 +168,11 @@ module.exports = function(Chart) {
 				if (me.isHorizontal()) {
 					titleX = left + ((right - left) / 2); // midpoint of the width
 					titleY = top + ((bottom - top) / 2); // midpoint of the height
+					maxWidth = right - left;
 				} else {
 					titleX = opts.position === 'left' ? left + (fontSize / 2) : right - (fontSize / 2);
 					titleY = top + ((bottom - top) / 2);
+					maxWidth = bottom - top;
 					rotation = Math.PI * (opts.position === 'left' ? -0.5 : 0.5);
 				}
 
@@ -178,7 +181,7 @@ module.exports = function(Chart) {
 				ctx.rotate(rotation);
 				ctx.textAlign = 'center';
 				ctx.textBaseline = 'middle';
-				ctx.fillText(opts.text, 0, 0);
+				ctx.fillText(opts.text, 0, 0, maxWidth);
 				ctx.restore();
 			}
 		}