diff --git a/src/elements/element.line.js b/src/elements/element.line.js index e6265a12822..985fa0b24e9 100644 --- a/src/elements/element.line.js +++ b/src/elements/element.line.js @@ -34,17 +34,19 @@ function getLineMethod(options) { return lineTo; } -function pathVars(points, segment, params) { - params = params || {}; +function pathVars(points, segment, params = {}) { const count = points.length; - const start = Math.max(params.start || 0, segment.start); - const end = Math.min(params.end || count - 1, segment.end); + const {start: paramsStart = 0, end: paramsEnd = count - 1} = params; + const {start: segmentStart, end: segmentEnd} = segment; + const start = Math.max(paramsStart, segmentStart); + const end = Math.min(paramsEnd, segmentEnd); + const outside = paramsStart < segmentStart && paramsEnd < segmentStart || paramsStart > segmentEnd && paramsEnd > segmentEnd; return { count, start, loop: segment.loop, - ilen: end < start ? count + end - start : end - start + ilen: end < start && !outside ? count + end - start : end - start }; } diff --git a/src/plugins/plugin.filler.js b/src/plugins/plugin.filler.js index 4d36f4bd71b..1bd851da47b 100644 --- a/src/plugins/plugin.filler.js +++ b/src/plugins/plugin.filler.js @@ -496,7 +496,7 @@ function _fill(ctx, cfg) { function doFill(ctx, cfg) { const {line, target, above, below, area, scale} = cfg; - const property = line._loop ? 'angle' : 'x'; + const property = line._loop ? 'angle' : cfg.axis; ctx.save(); @@ -514,14 +514,14 @@ function doFill(ctx, cfg) { function drawfill(ctx, source, area) { const target = getTarget(source); - const {line, scale} = source; + const {line, scale, axis} = source; const lineOpts = line.options; const fillOption = lineOpts.fill; const color = lineOpts.backgroundColor; const {above = color, below = color} = fillOption || {}; if (target && line.points.length) { clipArea(ctx, area); - doFill(ctx, {line, target, above, below, area, scale}); + doFill(ctx, {line, target, above, below, area, scale, axis}); unclipArea(ctx); } } @@ -545,6 +545,7 @@ export default { index: i, fill: decodeFill(line, i, count), chart, + axis: meta.controller.options.indexAxis, scale: meta.vScale, line, }; diff --git a/test/fixtures/controller.line/issue-8902.js b/test/fixtures/controller.line/issue-8902.js new file mode 100644 index 00000000000..cb986380708 --- /dev/null +++ b/test/fixtures/controller.line/issue-8902.js @@ -0,0 +1,30 @@ +module.exports = { + description: 'https://github.com/chartjs/Chart.js/issues/8902', + config: { + type: 'line', + data: { + labels: [1, 2, 3, 4, 5, 6, 7, 8], + datasets: [{ + data: [65, 59, NaN, 48, 56, 57, 40], + borderColor: 'rgb(75, 192, 192)', + }] + }, + options: { + plugins: false, + scales: { + x: { + type: 'linear', + min: 1, + max: 3 + } + } + } + }, + options: { + spriteText: true, + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.line/issue-8902.png b/test/fixtures/controller.line/issue-8902.png new file mode 100644 index 00000000000..c132c579381 Binary files /dev/null and b/test/fixtures/controller.line/issue-8902.png differ diff --git a/test/fixtures/plugin.filler/line/vertical.js b/test/fixtures/plugin.filler/line/vertical.js new file mode 100644 index 00000000000..864f8b4161e --- /dev/null +++ b/test/fixtures/plugin.filler/line/vertical.js @@ -0,0 +1,42 @@ +const data = [ + {y: 1, x: 12}, + {y: 3, x: 14}, + {y: 4, x: 20}, + {y: 6, x: 13}, + {y: 9, x: 18}, +]; + +module.exports = { + config: { + type: 'line', + data: { + datasets: [{ + data: data, + borderColor: 'red', + fill: false, + }, { + data: data.map((v) => ({y: v.y, x: 2 * v.x - 1.5 * v.y})), + fill: '-1', + borderColor: 'blue', + backgroundColor: 'rgba(255, 200, 0, 0.5)', + }] + }, + options: { + indexAxis: 'y', + radius: 0, + plugins: { + legend: false + }, + scales: { + x: { + display: false, + type: 'linear' + }, + y: { + display: false, + type: 'linear' + } + } + } + } +}; diff --git a/test/fixtures/plugin.filler/line/vertical.png b/test/fixtures/plugin.filler/line/vertical.png new file mode 100644 index 00000000000..5d0dd3aa578 Binary files /dev/null and b/test/fixtures/plugin.filler/line/vertical.png differ