From d4dadbd011947679c3c953032a780d243db8249e Mon Sep 17 00:00:00 2001
From: generaltony007 <191973953+hakarrr@users.noreply.github.com>
Date: Mon, 26 Oct 2026 22:28:46 +0530
Subject: [PATCH 1/2] Refactor pixel calculation based on scale orientation

Co-authored-by: generaltony007 <144252170+GeneralTony007@users.noreply.github.com>
---
 src/plugins/plugin.filler/filler.options.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/plugins/plugin.filler/filler.options.js b/src/plugins/plugin.filler/filler.options.js
index 33b965bc798..f4d59a7d8c3 100644
--- a/src/plugins/plugin.filler/filler.options.js
+++ b/src/plugins/plugin.filler/filler.options.js
@@ -80,9 +80,9 @@ function decodeTargetIndex(firstCh, index, target, count) {
 export function _getTargetPixel(fill, scale) {
   let pixel = null;
   if (fill === 'start') {
-    pixel = scale.bottom;
+    pixel = scale.isHorizontal() ? scale.left : scale.bottom;
   } else if (fill === 'end') {
-    pixel = scale.top;
+    pixel = scale.isHorizontal() ? scale.right : scale.top;
   } else if (isObject(fill)) {
     // @ts-ignore
     pixel = scale.getPixelForValue(fill.value);

From 6ddd50b826686dbb694712b7bc46b3dfea3bd736 Mon Sep 17 00:00:00 2001
From: generaltony007 <191973953+hakarrr@users.noreply.github.com>
Date: Mon, 26 Oct 2026 22:28:55 +0530
Subject: [PATCH 2/2] Use horizontal scale edges for boundary fills (tests)

Co-authored-by: generaltony007 <144252170+GeneralTony007@users.noreply.github.com>
---
 test/specs/plugin.filler.tests.js | 75 +++++++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)

diff --git a/test/specs/plugin.filler.tests.js b/test/specs/plugin.filler.tests.js
index a01f2ff53cc..076c2bc93da 100644
--- a/test/specs/plugin.filler.tests.js
+++ b/test/specs/plugin.filler.tests.js
@@ -297,3 +297,78 @@ describe('Plugin.filler', function() {
     });
   });
 });
+
+
+describe('Filler scale boundaries', function() {
+  ['x', 'y'].forEach(function(indexAxis) {
+    [false, true].forEach(function(reverse) {
+      ['start', 'end'].forEach(function(fill) {
+        ['beforeDraw', 'beforeDatasetsDraw', 'beforeDatasetDraw'].forEach(function(drawTime) {
+          it('fills the ' + fill + ' boundary for ' + [indexAxis, reverse, drawTime].join(', '), function() {
+            var valueAxis = indexAxis === 'x' ? 'y' : 'x';
+            var chart = window.acquireChart({
+              type: 'line',
+              data: {labels: ['A', 'B'], datasets: [{data: [5, 5], fill, backgroundColor: 'blue', borderWidth: 0, pointRadius: 0}]},
+              options: {
+                indexAxis,
+                animation: false,
+                layout: {padding: {left: 100, right: 20, top: 30, bottom: 170}},
+                plugins: {legend: false, filler: {drawTime}},
+                scales: {
+                  x: {display: false},
+                  y: {display: false},
+                  [valueAxis]: {display: false, reverse, min: 0, max: 10}
+                }
+              }
+            });
+            function pixel(fraction) {
+              var a = chart.chartArea;
+              var x = a.left + a.width * (valueAxis === 'x' ? fraction : 0.5);
+              var y = a.top + a.height * (valueAxis === 'y' ? fraction : 0.5);
+              return Array.from(chart.ctx.getImageData(x, y, 1, 1).data);
+            }
+            var startFraction = valueAxis === 'x' ? 0.2 : 0.8;
+            var filled = fill === 'start' ? startFraction : 1 - startFraction;
+            expect(pixel(filled)).toEqual([0, 0, 255, 255]);
+            expect(pixel(1 - filled)[3]).toEqual(0);
+            chart.update();
+            expect(pixel(filled)).toEqual([0, 0, 255, 255]);
+          });
+        });
+      });
+    });
+  });
+});
+
+
+describe('Filler value boundary controls', function() {
+  ['x', 'y'].forEach(function(indexAxis) {
+    [false, true].forEach(function(reverse) {
+      ['origin', {value: 0}].forEach(function(fill) {
+        it('keeps value targets for ' + [indexAxis, reverse, JSON.stringify(fill)].join(', '), function() {
+          var valueAxis = indexAxis === 'x' ? 'y' : 'x';
+          var chart = window.acquireChart({
+            type: 'line',
+            data: {labels: ['A', 'B'], datasets: [{data: [5, 5], fill, backgroundColor: 'blue', borderWidth: 0, pointRadius: 0}]},
+            options: {
+              indexAxis,
+              animation: false,
+              layout: {padding: {left: 100, right: 20, top: 30, bottom: 170}},
+              plugins: {legend: false},
+              scales: {
+                x: {display: false},
+                y: {display: false},
+                [valueAxis]: {display: false, reverse, min: 0, max: 10}
+              }
+            }
+          });
+          var a = chart.chartArea;
+          var valuePixel = chart.scales[valueAxis].getPixelForValue(2);
+          var x = valueAxis === 'x' ? valuePixel : a.left + a.width / 2;
+          var y = valueAxis === 'y' ? valuePixel : a.top + a.height / 2;
+          expect(Array.from(chart.ctx.getImageData(x, y, 1, 1).data)).toEqual([0, 0, 255, 255]);
+        });
+      });
+    });
+  });
+});