align text inside chart for far-aligned labels

Author: lab900-marcel-samyn

src/core/core.scale.js

@@ -1,6 +1,6 @@
 import defaults from './core.defaults';
 import Element from './core.element';
-import {_alignPixel, _measureText, renderText} from '../helpers/helpers.canvas';
+import {_alignPixel, _measureText, renderText, clipArea, unclipArea} from '../helpers/helpers.canvas';
 import {callback as call, each, finiteOrDefault, isArray, isFinite, isNullOrUndef, isObject, valueOrDefault} from '../helpers/helpers.core';
 import {_factorize, toDegrees, toRadians, _int16Range, HALF_PI} from '../helpers/helpers.math';
 import {toFont, resolve, toPadding} from '../helpers/helpers.options';
@@ -1468,6 +1468,7 @@ export default class Scale extends Element {
 		const labelSizes = me._getLabelSizes();
 		const tickAndPadding = tl + padding;
 		const widest = labelSizes.widest.width;
+		const lineSpace = labelSizes.highest.offset * 0.8;
 
 		let textAlign;
 		let x;
@@ -1486,7 +1487,7 @@ export default class Scale extends Element {
 					x -= (widest / 2);
 				} else {
 					textAlign = 'left';
-					x -= widest;
+					x = me.left + lineSpace;
 				}
 			}
 		} else if (position === 'right') {
@@ -1503,7 +1504,7 @@ export default class Scale extends Element {
 					x += widest / 2;
 				} else {
 					textAlign = 'right';
-					x += widest;
+					x = me.right - lineSpace;
 				}
 			}
 		} else {
@@ -1513,6 +1514,36 @@ export default class Scale extends Element {
 		return {textAlign, x};
 	}
 
+	/**
+	 * @private
+	 */
+	_computeLabelArea() {
+		const me = this;
+		const position = me.options.position;
+		const ctx = me.ctx;
+
+		const area = {
+			left: me.left,
+			top: me.top,
+			right: me.right,
+			bottom: me.bottom,
+		};
+
+		if (position === 'left' || position === 'right') {
+			if (me.isHorizontal()) {
+				area.left -= me._labelSizes.first.width;
+				area.right += me._labelSizes.last.width;
+			} else {
+				area.top -= me._labelSizes.first.height;
+				area.bottom += me._labelSizes.first.height;
+			}
+
+			return area;
+		}
+
+		return null;
+	}
+
 	/**
 	 * @protected
 	 */
@@ -1604,6 +1635,12 @@ export default class Scale extends Element {
 		}
 
 		const ctx = me.ctx;
+
+		const area = me._computeLabelArea();
+		if (area) {
+			clipArea(ctx, area);
+		}
+
 		const items = me._labelItems || (me._labelItems = me._computeLabelItems(chartArea));
 		let i, ilen;
 
@@ -1614,6 +1651,10 @@ export default class Scale extends Element {
 			let y = item.textOffset;
 			renderText(ctx, label, 0, y, tickFont, item);
 		}
+
+		if (area) {
+			unclipArea(ctx);
+		}
 	}
 
 	/**