Use horizontal scale edges for start and end fills

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);

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]);
+        });
+      });
+    });
+  });
+});