Skip to content
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
8 changes: 4 additions & 4 deletions src/core/core.scale.js
Original file line number Diff line number Diff line change
Expand Up @@ -119,10 +119,10 @@ function createTickContext(parent, index, tick) {
});
}

function titleAlign(align, position, reverse) {
function titleAlign(align, position) {
/** @type {CanvasTextAlign} */
let ret = _toLeftRightCenter(align);
if ((reverse && position !== 'right') || (!reverse && position === 'right')) {
if (position === 'right') {
ret = reverseAlign(ret);
}
return ret;
Expand Down Expand Up @@ -1586,7 +1586,7 @@ export default class Scale extends Element {
* @protected
*/
drawTitle() {
const {ctx, options: {position, title, reverse}} = this;
const {ctx, options: {position, title}} = this;

if (!title.display) {
return;
Expand All @@ -1612,7 +1612,7 @@ export default class Scale extends Element {
color: title.color,
maxWidth,
rotation,
textAlign: titleAlign(align, position, reverse),
textAlign: titleAlign(align, position),
textBaseline: 'middle',
translation: [titleX, titleY],
strokeColor: title.strokeColor,
Expand Down
77 changes: 77 additions & 0 deletions test/specs/core.scale.tests.js
Original file line number Diff line number Diff line change
Expand Up @@ -818,6 +818,83 @@ describe('Core.scale', function() {
});
});
describe('Scale Title stroke', ()=>{
function getScaleTitleCalls(position, align, reverse) {
const axis = position === 'left' || position === 'right' ? 'y' : 'x';
const chart = window.acquireChart({
type: 'scatter',
data: {
datasets: [{
data: [{x: 0, y: 0}, {x: 10, y: 10}]
}]
},
options: {
events: [],
animation: false,
plugins: {
legend: false
},
scales: {
x: {
display: axis === 'x',
position: axis === 'x' ? position : 'bottom',
min: 0,
max: 10,
reverse: axis === 'x' ? reverse : false,
ticks: {
display: false
},
grid: {
display: false
},
border: {
display: false
},
title: {
display: axis === 'x',
text: 'title',
align
}
},
y: {
display: axis === 'y',
position: axis === 'y' ? position : 'left',
min: 0,
max: 10,
reverse: axis === 'y' ? reverse : false,
ticks: {
display: false
},
grid: {
display: false
},
border: {
display: false
},
title: {
display: axis === 'y',
text: 'title',
align
}
}
}
}
});
const scale = chart.scales[axis];

scale.ctx = window.createMockContext();
chart.draw();

return scale.ctx.getCalls().filter(({name}) => ['translate', 'setTextAlign', 'fillText'].includes(name));
}

['top', 'bottom', 'left', 'right'].forEach(function(position) {
['start', 'end'].forEach(function(align) {
it('should not reposition the ' + position + ' scale title when reverse=true and align=' + align, function() {
expect(getScaleTitleCalls(position, align, true)).toEqual(getScaleTitleCalls(position, align, false));
});
});
});

function getChartWithScaleTitleStroke() {
return window.acquireChart({
type: 'line',
Expand Down
Loading