Add label alignment option to axis label title (#6521)

Add label alignment option to axis label title

diff --git a/docs/axes/labelling.md b/docs/axes/labelling.md
index 96c5eae378481b4da46b922b493832083ed47f53..f92f9be42f2f64fe71a06c449ef42533d37de2f0 100644 (file)
--- a/docs/axes/labelling.md
+++ b/docs/axes/labelling.md
@@ -9,6 +9,7 @@ The scale label configuration is nested under the scale configuration in the `sc
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
 | `display` | `boolean` | `false` | If true, display the axis title.
+| `align` | `string` | `'center'` | Alignment of the axis title. Possible options are `'start'`, `'center'` and `'end'`
 | `labelString` | `string` | `''` | The text for the title. (i.e. "# of People" or "Response Choices").
 | `lineHeight` | <code>number&#124;string</code> | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)).
 | `fontColor` | `Color` | `'#666'` | Font color for scale title.

diff --git a/src/core/core.scale.js b/src/core/core.scale.js
index 914bdefaae1ae0a93442768fcffaa14568fad805..ed27af3f14eeb87f5b56ab4235cdf65b54e2a522 100644 (file)
--- a/src/core/core.scale.js
+++ b/src/core/core.scale.js
@@ -1350,28 +1350,54 @@ var Scale = Element.extend({
                var scaleLabelFont = helpers.options._parseFont(scaleLabel);
                var scaleLabelPadding = helpers.options.toPadding(scaleLabel.padding);
                var halfLineHeight = scaleLabelFont.lineHeight / 2;
+               var scaleLabelAlign = scaleLabel.align;
                var position = options.position;
                var rotation = 0;
-               var scaleLabelX, scaleLabelY;
+               var isReverse = me.options.ticks.reverse;
+               var scaleLabelX, scaleLabelY, textAlign;
 
                if (me.isHorizontal()) {
-                       scaleLabelX = me.left + me.width / 2; // midpoint of the width
-                       scaleLabelY = position === 'bottom'
-                               ? me.bottom - halfLineHeight - scaleLabelPadding.bottom
-                               : me.top + halfLineHeight + scaleLabelPadding.top;
+                       switch (scaleLabelAlign) {
+                       case 'start':
+                               scaleLabelX = me.left + (isReverse ? me.width : 0);
+                               textAlign = isReverse ? 'right' : 'left';
+                               break;
+                       case 'end':
+                               scaleLabelX = me.left + (isReverse ? 0 : me.width);
+                               textAlign = isReverse ? 'left' : 'right';
+                               break;
+                       default:
+                               scaleLabelX = me.left + me.width / 2;
+                               textAlign = 'center';
+                       }
+                       scaleLabelY = position === 'top'
+                               ? me.top + halfLineHeight + scaleLabelPadding.top
+                               : me.bottom - halfLineHeight - scaleLabelPadding.bottom;
                } else {
                        var isLeft = position === 'left';
                        scaleLabelX = isLeft
                                ? me.left + halfLineHeight + scaleLabelPadding.top
                                : me.right - halfLineHeight - scaleLabelPadding.top;
-                       scaleLabelY = me.top + me.height / 2;
+                       switch (scaleLabelAlign) {
+                       case 'start':
+                               scaleLabelY = me.top + (isReverse ? 0 : me.height);
+                               textAlign = isReverse === isLeft ? 'right' : 'left';
+                               break;
+                       case 'end':
+                               scaleLabelY = me.top + (isReverse ? me.height : 0);
+                               textAlign = isReverse === isLeft ? 'left' : 'right';
+                               break;
+                       default:
+                               scaleLabelY = me.top + me.height / 2;
+                               textAlign = 'center';
+                       }
                        rotation = isLeft ? -0.5 * Math.PI : 0.5 * Math.PI;
                }
 
                ctx.save();
                ctx.translate(scaleLabelX, scaleLabelY);
                ctx.rotate(rotation);
-               ctx.textAlign = 'center';
+               ctx.textAlign = textAlign;
                ctx.textBaseline = 'middle';
                ctx.fillStyle = scaleLabelFontColor; // render in correct colour
                ctx.font = scaleLabelFont.string;