Skip to content

Add label alignment option to axis label title #6521

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
etimberg merged 11 commits into from
Oct 27, 2019
Merged

Add label alignment option to axis label title #6521

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
cea8546
Add label alignment option to axis label title
el Sep 15, 2019
7ecdf3a
Documentation and style fixes
el Sep 16, 2019
c9c7f48
Fix alignment based on position
el Sep 16, 2019
dc04813
Use start as bottom
el Sep 19, 2019
4fe3f2e
use isreverse for reverse option
el Sep 19, 2019
1f40f09
Replace labelAlign with align
el Oct 4, 2019
7da5f6b
Rename the variable
el Oct 5, 2019
b5c2d2f
Review comments ...
el Oct 7, 2019
2c7df51
Update ternary operation
el Oct 7, 2019
2ca863e
Fix horizontal layout issue
el Oct 18, 2019
ff3c5ed
Remove unnecessary variable
el Oct 18, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/axes/labelling.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
40 changes: 33 additions & 7 deletions src/core/core.scale.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down