Skip to content

Commit

Permalink
Fixed #5230, a horizontal and opposite axis used to have wrong alignm…
Browse files Browse the repository at this point in the history
…ent for its title.
  • Loading branch information
jon-a-nygaard committed Apr 22, 2016
1 parent 0c2ad39 commit 45b062b
Show file tree
Hide file tree
Showing 7 changed files with 178 additions and 24 deletions.
20 changes: 14 additions & 6 deletions js/highcharts.src.js
Expand Up @@ -8685,6 +8685,7 @@
clip,
directionFactor = [-1, 1, 1, -1][side],
n,
textAlign,
axisParent = axis.axisParent, // Used in color axis
lineHeightCorrection,
tickSize = this.tickSize('tick');
Expand Down Expand Up @@ -8752,6 +8753,18 @@

if (axisTitleOptions && axisTitleOptions.text && axisTitleOptions.enabled !== false) {
if (!axis.axisTitle) {
textAlign = axisTitleOptions.textAlign;
if (!textAlign) {
textAlign = (horiz ? {
low: 'left',
middle: 'center',
high: 'right'
} : {
low: opposite ? 'right' : 'left',
middle: 'center',
high: opposite ? 'left' : 'right'
})[axisTitleOptions.align];
}
axis.axisTitle = renderer.text(
axisTitleOptions.text,
0,
Expand All @@ -8761,12 +8774,7 @@
.attr({
zIndex: 7,
rotation: axisTitleOptions.rotation || 0,
align:
axisTitleOptions.textAlign || {
low: opposite ? 'right' : 'left',
middle: 'center',
high: opposite ? 'left' : 'right'
}[axisTitleOptions.align]
align: textAlign
})
.addClass(PREFIX + this.coll.toLowerCase() + '-title')
.css(axisTitleOptions.style)
Expand Down
20 changes: 14 additions & 6 deletions js/highmaps.src.js
Expand Up @@ -8407,6 +8407,7 @@
clip,
directionFactor = [-1, 1, 1, -1][side],
n,
textAlign,
axisParent = axis.axisParent, // Used in color axis
lineHeightCorrection,
tickSize = this.tickSize('tick');
Expand Down Expand Up @@ -8474,6 +8475,18 @@

if (axisTitleOptions && axisTitleOptions.text && axisTitleOptions.enabled !== false) {
if (!axis.axisTitle) {
textAlign = axisTitleOptions.textAlign;
if (!textAlign) {
textAlign = (horiz ? {
low: 'left',
middle: 'center',
high: 'right'
} : {
low: opposite ? 'right' : 'left',
middle: 'center',
high: opposite ? 'left' : 'right'
})[axisTitleOptions.align];
}
axis.axisTitle = renderer.text(
axisTitleOptions.text,
0,
Expand All @@ -8483,12 +8496,7 @@
.attr({
zIndex: 7,
rotation: axisTitleOptions.rotation || 0,
align:
axisTitleOptions.textAlign || {
low: opposite ? 'right' : 'left',
middle: 'center',
high: opposite ? 'left' : 'right'
}[axisTitleOptions.align]
align: textAlign
})
.addClass(PREFIX + this.coll.toLowerCase() + '-title')
.css(axisTitleOptions.style)
Expand Down
20 changes: 14 additions & 6 deletions js/highstock.src.js
Expand Up @@ -8685,6 +8685,7 @@
clip,
directionFactor = [-1, 1, 1, -1][side],
n,
textAlign,
axisParent = axis.axisParent, // Used in color axis
lineHeightCorrection,
tickSize = this.tickSize('tick');
Expand Down Expand Up @@ -8752,6 +8753,18 @@

if (axisTitleOptions && axisTitleOptions.text && axisTitleOptions.enabled !== false) {
if (!axis.axisTitle) {
textAlign = axisTitleOptions.textAlign;
if (!textAlign) {
textAlign = (horiz ? {
low: 'left',
middle: 'center',
high: 'right'
} : {
low: opposite ? 'right' : 'left',
middle: 'center',
high: opposite ? 'left' : 'right'
})[axisTitleOptions.align];
}
axis.axisTitle = renderer.text(
axisTitleOptions.text,
0,
Expand All @@ -8761,12 +8774,7 @@
.attr({
zIndex: 7,
rotation: axisTitleOptions.rotation || 0,
align:
axisTitleOptions.textAlign || {
low: opposite ? 'right' : 'left',
middle: 'center',
high: opposite ? 'left' : 'right'
}[axisTitleOptions.align]
align: textAlign
})
.addClass(PREFIX + this.coll.toLowerCase() + '-title')
.css(axisTitleOptions.style)
Expand Down
20 changes: 14 additions & 6 deletions js/parts/Axis.js
Expand Up @@ -1788,6 +1788,7 @@ Axis.prototype = {
clip,
directionFactor = [-1, 1, 1, -1][side],
n,
textAlign,
axisParent = axis.axisParent, // Used in color axis
lineHeightCorrection,
tickSize = this.tickSize('tick');
Expand Down Expand Up @@ -1855,6 +1856,18 @@ Axis.prototype = {

if (axisTitleOptions && axisTitleOptions.text && axisTitleOptions.enabled !== false) {
if (!axis.axisTitle) {
textAlign = axisTitleOptions.textAlign;
if (!textAlign) {
textAlign = (horiz ? {
low: 'left',
middle: 'center',
high: 'right'
} : {
low: opposite ? 'right' : 'left',
middle: 'center',
high: opposite ? 'left' : 'right'
})[axisTitleOptions.align];
}
axis.axisTitle = renderer.text(
axisTitleOptions.text,
0,
Expand All @@ -1864,12 +1877,7 @@ Axis.prototype = {
.attr({
zIndex: 7,
rotation: axisTitleOptions.rotation || 0,
align:
axisTitleOptions.textAlign || {
low: opposite ? 'right' : 'left',
middle: 'center',
high: opposite ? 'left' : 'right'
}[axisTitleOptions.align]
align: textAlign
})
.addClass(PREFIX + this.coll.toLowerCase() + '-title')
.css(axisTitleOptions.style)
Expand Down
5 changes: 5 additions & 0 deletions samples/unit-tests/axis/title/demo.details
@@ -0,0 +1,5 @@
---
resources:
- https://code.jquery.com/qunit/qunit-1.19.0.js
- https://code.jquery.com/qunit/qunit-1.19.0.css
...
7 changes: 7 additions & 0 deletions samples/unit-tests/axis/title/demo.html
@@ -0,0 +1,7 @@
<script src="https://code.highcharts.com/highcharts.js"></script>


<div id="qunit"></div>
<div id="qunit-fixture"></div>

<div id="container" style="width: 600px; margin: 0 auto"></div>
110 changes: 110 additions & 0 deletions samples/unit-tests/axis/title/demo.js
@@ -0,0 +1,110 @@
QUnit.test('textAlign', function (assert) {
var chart = Highcharts.chart('container', {
yAxis: [{
title: {
text: 'Vertical Axis'
}
}],
xAxis: [{
title: {
text: 'Horizontal Axis'
}
}],
series: [{
data: []
}]
}),
getTitleTextAlign = function (axis) {
var align = { start: 'left', middle: 'center', end: 'right' };
// Ideally there should the renderer should have an alignGetter. Alternative syntax axis.axisTitle.attr('align');
return align[axis.axisTitle.element.getAttribute('text-anchor')];
}
horizontalAxis = chart.xAxis[0],
verticalAxis = chart.yAxis[0];

// Test the horizontal axis
assert.strictEqual(
getTitleTextAlign(horizontalAxis),
'center',
'horizontal Axis default textAlign:middle'
);
horizontalAxis.update({ title: { align: 'low' }});
assert.strictEqual(
getTitleTextAlign(horizontalAxis),
'left',
'horizontal Axis align:low has textAlign:left'
);
horizontalAxis.update({ title: { align: 'middle' }});
assert.strictEqual(
getTitleTextAlign(horizontalAxis),
'center',
'horizontal Axis align:middle has textAlign:center'
);
horizontalAxis.update({ title: { align: 'high' }});
assert.strictEqual(
getTitleTextAlign(horizontalAxis),
'right',
'horizontal Axis align:high has textAlign:right'
);
horizontalAxis.update({ opposite: true });
assert.strictEqual(
getTitleTextAlign(horizontalAxis),
'right',
'horizontal and opposite Axis align:high has textAlign:right'
);
horizontalAxis.update({ title: { align: 'middle' }});
assert.strictEqual(
getTitleTextAlign(horizontalAxis),
'center',
'horizontal and opposite Axis align:middle has textAlign:center'
);
horizontalAxis.update({ title: { align: 'low' }});
assert.strictEqual(
getTitleTextAlign(horizontalAxis),
'left',
'horizontal and opposite Axis align:low has textAlign:left'
);

// Test the vertical axis
assert.strictEqual(
getTitleTextAlign(verticalAxis),
'center',
'vertical Axis default textAlign:middle'
);
verticalAxis.update({ title: { align: 'low' }});
assert.strictEqual(
getTitleTextAlign(verticalAxis),
'left',
'vertical Axis align:low has textAlign:left'
);
verticalAxis.update({ title: { align: 'middle' }});
assert.strictEqual(
getTitleTextAlign(verticalAxis),
'center',
'vertical Axis align:middle has textAlign:center'
);
verticalAxis.update({ title: { align: 'high' }});
assert.strictEqual(
getTitleTextAlign(verticalAxis),
'right',
'vertical Axis align:high has textAlign:right'
);
verticalAxis.update({ opposite: true });
assert.strictEqual(
getTitleTextAlign(verticalAxis),
'left',
'vertical opposite Axis align:high has textAlign:left'
);
verticalAxis.update({ title: { align: 'middle' }});
assert.strictEqual(
getTitleTextAlign(verticalAxis),
'center',
'vertical opposite Axis align:middle has textAlign:center'
);
verticalAxis.update({ title: { align: 'low' }});
assert.strictEqual(
getTitleTextAlign(verticalAxis),
'right',
'vertical opposite Axis align:low has textAlign:right'
);
});

0 comments on commit 45b062b

Please sign in to comment.