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 8b8bf347292..3265e103d1a 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 00000000000..f9fbaddc103 --- /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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