Fix: don't draw segments out of bounds (chartjs#8911)

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

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,
         };

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

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'
+        }
+      }
+    }
+  }
+};