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