diff --git a/src/core/core.scale.js b/src/core/core.scale.js index 7eaa656c6ce..dd8e1bfd27b 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -1344,8 +1344,17 @@ export default class Scale extends Element { if (position === 'left') { if (mirror) { - textAlign = 'left'; x = me.right + padding; + + if (crossAlign === 'near') { + textAlign = 'left'; + } else if (crossAlign === 'center') { + textAlign = 'center'; + x += (widest / 2); + } else { + textAlign = 'right'; + x += widest; + } } else { x = me.right - tickAndPadding; @@ -1361,8 +1370,17 @@ export default class Scale extends Element { } } else if (position === 'right') { if (mirror) { - textAlign = 'right'; x = me.left + padding; + + if (crossAlign === 'near') { + textAlign = 'right'; + } else if (crossAlign === 'center') { + textAlign = 'center'; + x -= (widest / 2); + } else { + textAlign = 'left'; + x -= widest; + } } else { x = me.left + tickAndPadding; diff --git a/test/fixtures/core.scale/crossAlignment/mirror-cross-align-left-center.js b/test/fixtures/core.scale/crossAlignment/mirror-cross-align-left-center.js new file mode 100644 index 00000000000..8c0af63c383 --- /dev/null +++ b/test/fixtures/core.scale/crossAlignment/mirror-cross-align-left-center.js @@ -0,0 +1,30 @@ +module.exports = { + config: { + type: 'bar', + data: { + datasets: [{ + data: [1, 2, 3], + }], + labels: ['Long long label 1', 'Label2', 'Label3'] + }, + options: { + indexAxis: 'y', + scales: { + y: { + position: 'left', + ticks: { + mirror: true, + crossAlign: 'center', + }, + }, + } + } + }, + options: { + spriteText: true, + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/core.scale/crossAlignment/mirror-cross-align-left-center.png b/test/fixtures/core.scale/crossAlignment/mirror-cross-align-left-center.png new file mode 100644 index 00000000000..f64fdbebf1e Binary files /dev/null and b/test/fixtures/core.scale/crossAlignment/mirror-cross-align-left-center.png differ diff --git a/test/fixtures/core.scale/crossAlignment/mirror-cross-align-left-far.js b/test/fixtures/core.scale/crossAlignment/mirror-cross-align-left-far.js new file mode 100644 index 00000000000..c5f2e23f53b --- /dev/null +++ b/test/fixtures/core.scale/crossAlignment/mirror-cross-align-left-far.js @@ -0,0 +1,30 @@ +module.exports = { + config: { + type: 'bar', + data: { + datasets: [{ + data: [1, 2, 3], + }], + labels: ['Long long label 1', 'Label2', 'Label3'] + }, + options: { + indexAxis: 'y', + scales: { + y: { + position: 'left', + ticks: { + mirror: true, + crossAlign: 'far', + }, + }, + } + } + }, + options: { + spriteText: true, + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/core.scale/crossAlignment/mirror-cross-align-left-far.png b/test/fixtures/core.scale/crossAlignment/mirror-cross-align-left-far.png new file mode 100644 index 00000000000..daf5104542c Binary files /dev/null and b/test/fixtures/core.scale/crossAlignment/mirror-cross-align-left-far.png differ diff --git a/test/fixtures/core.scale/crossAlignment/mirror-cross-align-left-near.js b/test/fixtures/core.scale/crossAlignment/mirror-cross-align-left-near.js new file mode 100644 index 00000000000..c525a1bff18 --- /dev/null +++ b/test/fixtures/core.scale/crossAlignment/mirror-cross-align-left-near.js @@ -0,0 +1,30 @@ +module.exports = { + config: { + type: 'bar', + data: { + datasets: [{ + data: [1, 2, 3], + }], + labels: ['Long long label 1', 'Label2', 'Label3'] + }, + options: { + indexAxis: 'y', + scales: { + y: { + position: 'left', + ticks: { + mirror: true, + crossAlign: 'near', + }, + }, + } + } + }, + options: { + spriteText: true, + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/core.scale/crossAlignment/mirror-cross-align-left-near.png b/test/fixtures/core.scale/crossAlignment/mirror-cross-align-left-near.png new file mode 100644 index 00000000000..39edd49d319 Binary files /dev/null and b/test/fixtures/core.scale/crossAlignment/mirror-cross-align-left-near.png differ diff --git a/test/fixtures/core.scale/crossAlignment/mirror-cross-align-right-center.js b/test/fixtures/core.scale/crossAlignment/mirror-cross-align-right-center.js new file mode 100644 index 00000000000..d9472b2de62 --- /dev/null +++ b/test/fixtures/core.scale/crossAlignment/mirror-cross-align-right-center.js @@ -0,0 +1,30 @@ +module.exports = { + config: { + type: 'bar', + data: { + datasets: [{ + data: [1, 2, 3], + }], + labels: ['Long long label 1', 'Label2', 'Label3'] + }, + options: { + indexAxis: 'y', + scales: { + y: { + position: 'right', + ticks: { + mirror: true, + crossAlign: 'center', + }, + }, + } + } + }, + options: { + spriteText: true, + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/core.scale/crossAlignment/mirror-cross-align-right-center.png b/test/fixtures/core.scale/crossAlignment/mirror-cross-align-right-center.png new file mode 100644 index 00000000000..6b41efcd92f Binary files /dev/null and b/test/fixtures/core.scale/crossAlignment/mirror-cross-align-right-center.png differ diff --git a/test/fixtures/core.scale/crossAlignment/mirror-cross-align-right-far.js b/test/fixtures/core.scale/crossAlignment/mirror-cross-align-right-far.js new file mode 100644 index 00000000000..6e187c0fede --- /dev/null +++ b/test/fixtures/core.scale/crossAlignment/mirror-cross-align-right-far.js @@ -0,0 +1,30 @@ +module.exports = { + config: { + type: 'bar', + data: { + datasets: [{ + data: [1, 2, 3], + }], + labels: ['Long long label 1', 'Label2', 'Label3'] + }, + options: { + indexAxis: 'y', + scales: { + y: { + position: 'right', + ticks: { + mirror: true, + crossAlign: 'far', + }, + }, + } + } + }, + options: { + spriteText: true, + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/core.scale/crossAlignment/mirror-cross-align-right-far.png b/test/fixtures/core.scale/crossAlignment/mirror-cross-align-right-far.png new file mode 100644 index 00000000000..992904590a1 Binary files /dev/null and b/test/fixtures/core.scale/crossAlignment/mirror-cross-align-right-far.png differ diff --git a/test/fixtures/core.scale/crossAlignment/mirror-cross-align-right-near.js b/test/fixtures/core.scale/crossAlignment/mirror-cross-align-right-near.js new file mode 100644 index 00000000000..03dc7f0e43e --- /dev/null +++ b/test/fixtures/core.scale/crossAlignment/mirror-cross-align-right-near.js @@ -0,0 +1,30 @@ +module.exports = { + config: { + type: 'bar', + data: { + datasets: [{ + data: [1, 2, 3], + }], + labels: ['Long long label 1', 'Label2', 'Label3'] + }, + options: { + indexAxis: 'y', + scales: { + y: { + position: 'right', + ticks: { + mirror: true, + crossAlign: 'near', + }, + }, + } + } + }, + options: { + spriteText: true, + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/core.scale/crossAlignment/mirror-cross-align-right-near.png b/test/fixtures/core.scale/crossAlignment/mirror-cross-align-right-near.png new file mode 100644 index 00000000000..bbefddc5e64 Binary files /dev/null and b/test/fixtures/core.scale/crossAlignment/mirror-cross-align-right-near.png differ