Fix stacked fill with lines over multiple scales (#9767)

src/plugins/plugin.filler.js

@@ -206,11 +206,11 @@ function pointsFromSegments(boundary, line) {
  * @return {LineElement}
  */
 function buildStackLine(source) {
-  const {chart, scale, index, line} = source;
+  const {scale, index, line} = source;
   const points = [];
   const segments = line.segments;
   const sourcePoints = line.points;
-  const linesBelow = getLinesBelow(chart, index);
+  const linesBelow = getLinesBelow(scale, index);
   linesBelow.push(createBoundaryLine({x: null, y: scale.bottom}, line));
 
   for (let i = 0; i < segments.length; i++) {
@@ -222,23 +222,21 @@ function buildStackLine(source) {
   return new LineElement({points, options: {}});
 }
 
-const isLineAndNotInHideAnimation = (meta) => meta.type === 'line' && !meta.hidden;
-
 /**
- * @param {Chart} chart
+ * @param {Scale} scale
  * @param {number} index
  * @return {LineElement[]}
  */
-function getLinesBelow(chart, index) {
+function getLinesBelow(scale, index) {
   const below = [];
-  const metas = chart.getSortedVisibleDatasetMetas();
+  const metas = scale.getMatchingVisibleMetas('line');
 
   for (let i = 0; i < metas.length; i++) {
     const meta = metas[i];
     if (meta.index === index) {
       break;
     }
-    if (isLineAndNotInHideAnimation(meta)) {
+    if (!meta.hidden) {
       below.unshift(meta.dataset);
     }
   }

test/fixtures/plugin.filler/line/stack-multiple-scales.js

@@ -0,0 +1,76 @@
+module.exports = {
+  config: {
+    type: 'line',
+    data: {
+      labels: ['0', '1', '2', '3'],
+      datasets: [{
+        backgroundColor: 'rgba(255, 0, 0, 0.5)',
+        data: [null, 1, 1, 1],
+        fill: 'stack'
+      }, {
+        backgroundColor: 'rgba(0, 255, 0, 0.5)',
+        data: [null, 2, 2, 2],
+        fill: 'stack'
+      }, {
+        backgroundColor: 'rgba(0, 0, 255, 0.5)',
+        data: [null, 3, 3, 3],
+        fill: 'stack'
+      }, {
+        backgroundColor: 'rgba(255, 0, 255, 0.5)',
+        data: [0.5, 0.5, 0.5, null],
+        fill: 'stack',
+        yAxisID: 'y2'
+      }, {
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        data: [1.5, 1.5, 1.5, null],
+        fill: 'stack',
+        yAxisID: 'y2'
+      }, {
+        backgroundColor: 'rgba(255, 255, 0, 0.5)',
+        data: [2.5, 2.5, 2.5, null],
+        fill: 'stack',
+        yAxisID: 'y2'
+      }]
+    },
+    options: {
+      responsive: false,
+      spanGaps: false,
+      scales: {
+        x: {
+          display: false
+        },
+        y: {
+          position: 'right',
+          stacked: true,
+          min: 0
+        },
+        y2: {
+          position: 'left',
+          stacked: true,
+          min: 0
+        }
+      },
+      elements: {
+        point: {
+          radius: 0
+        },
+        line: {
+          borderColor: 'transparent',
+          tension: 0
+        }
+      },
+      plugins: {
+        legend: false,
+        title: false,
+        tooltip: false
+      }
+    }
+  },
+  options: {
+    spriteText: true,
+    canvas: {
+      height: 256,
+      width: 512
+    }
+  }
+};