diff --git a/docs/axes/labelling.md b/docs/axes/labelling.md index 96c5eae3784..f92f9be42f2 100644 --- 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` | number|string | `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 8f532ca754f..6d6e105425b 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -1205,28 +1205,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;