From 2a03e138e903bdc4686acabd65eeabef61efedd0 Mon Sep 17 00:00:00 2001 From: Jacco van den Berg Date: Fri, 10 Nov 2023 00:25:36 +0100 Subject: [PATCH] Fix backdrop padding (#11577) * fix for alignment inner * Add test * Remove eslint ignores * remove unecesarry config * Remove text from test --- src/core/core.scale.js | 7 +++ .../tick-backdrop-alignment-inner.js | 48 ++++++++++++++++++ .../tick-backdrop-alignment-inner.png | Bin 0 -> 11202 bytes 3 files changed, 55 insertions(+) create mode 100644 test/fixtures/core.scale/tick-backdrop-alignment-inner.js create mode 100644 test/fixtures/core.scale/tick-backdrop-alignment-inner.png diff --git a/src/core/core.scale.js b/src/core/core.scale.js index 8b8bf3472..3265e103d 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -1288,6 +1288,13 @@ export default class Scale extends Element { case 'right': left -= width; break; + case 'inner': + if (i === ilen - 1) { + left -= width; + } else if (i > 0) { + left -= width / 2; + } + break; default: break; } diff --git a/test/fixtures/core.scale/tick-backdrop-alignment-inner.js b/test/fixtures/core.scale/tick-backdrop-alignment-inner.js new file mode 100644 index 000000000..f9fbaddc1 --- /dev/null +++ b/test/fixtures/core.scale/tick-backdrop-alignment-inner.js @@ -0,0 +1,48 @@ +module.exports = { + config: { + type: 'line', + data: { + labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], + datasets: [ + { + label: '# of Votes', + data: [12, 19, 3, 5, 2, 3], + }, + { + label: '# of Points', + data: [7, 11, 5, 8, 3, 7], + } + ] + }, + options: { + scales: { + y: { + ticks: { + display: false, + }, + grid: { + lineWidth: 0 + } + }, + x: { + position: 'top', + ticks: { + color: 'transparent', + backdropColor: 'red', + showLabelBackdrop: true, + align: 'inner', + }, + grid: { + lineWidth: 0 + } + } + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/core.scale/tick-backdrop-alignment-inner.png b/test/fixtures/core.scale/tick-backdrop-alignment-inner.png new file mode 100644 index 0000000000000000000000000000000000000000..2cddb8dfdd76bbc60d8bc49f4f370c60342fff08 GIT binary patch literal 11202 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