Use the correct area to clip for dataset drawing when stacked scales are used (#10691)

* Use the correct area to clip when stacked scales are used

* adds test cases

* fix CI issue

* apply review

* Update .size-limit.cjs

Co-authored-by: Jacco van den Berg <jaccoberg2281@gmail.com>

Co-authored-by: Jacco van den Berg <jaccoberg2281@gmail.com>

.size-limit.cjs

@@ -7,7 +7,7 @@ function modifyWebpackConfig(config) {
 module.exports = [
   {
     path: 'dist/chart.js',
-    limit: '77.2 KB',
+    limit: '77.5 KB',
     webpack: false,
     running: false
   },

src/core/core.controller.js

@@ -101,6 +101,18 @@ function determineLastEvent(e, lastEvent, inChartArea, isClick) {
   return e;
 }
 
+function getDatasetArea(meta) {
+  const {xScale, yScale} = meta;
+  if (xScale && yScale) {
+    return {
+      left: xScale.left,
+      right: xScale.right,
+      top: yScale.top,
+      bottom: yScale.bottom
+    };
+  }
+}
+
 class Chart {
 
   static defaults = defaults;
@@ -784,7 +796,7 @@ class Chart {
     const ctx = this.ctx;
     const clip = meta._clip;
     const useClip = !clip.disabled;
-    const area = this.chartArea;
+    const area = getDatasetArea(meta) || this.chartArea;
     const args = {
       meta,
       index: meta.index,

test/fixtures/core.layouts/stacked-boxes-max-index.js

@@ -0,0 +1,109 @@
+module.exports = {
+  config: {
+    type: 'line',
+    data: {
+      datasets: [
+        {data: [{x: 5, y: 1}, {x: 10, y: 2}, {x: 5, y: 3}], borderColor: 'red'},
+        {data: [{x: 5, y: 1}, {x: 10, y: 2}, {x: 5, y: 3}], yAxisID: 'y1', xAxisID: 'x1', borderColor: 'green'},
+        {data: [{x: 5, y: 1}, {x: 10, y: 2}, {x: 5, y: 3}], yAxisID: 'y2', xAxisID: 'x2', borderColor: 'blue'},
+      ],
+      labels: ['tick1', 'tick2', 'tick3']
+    },
+    options: {
+      plugins: false,
+      scales: {
+        x: {
+          type: 'linear',
+          position: 'bottom',
+          stack: '1',
+          offset: true,
+          bounds: 'data',
+          border: {
+            color: 'red'
+          },
+          ticks: {
+            autoSkip: false,
+            maxRotation: 0,
+            count: 3
+          },
+          max: 7
+        },
+        x1: {
+          type: 'linear',
+          position: 'bottom',
+          stack: '1',
+          offset: true,
+          bounds: 'data',
+          border: {
+            color: 'green'
+          },
+          ticks: {
+            autoSkip: false,
+            maxRotation: 0,
+            count: 3
+          },
+          max: 7
+        },
+        x2: {
+          type: 'linear',
+          position: 'bottom',
+          stack: '1',
+          offset: true,
+          bounds: 'data',
+          border: {
+            color: 'blue'
+          },
+          ticks: {
+            autoSkip: false,
+            maxRotation: 0,
+            count: 3
+          },
+          max: 7
+        },
+        y: {
+          type: 'linear',
+          position: 'left',
+          stack: '1',
+          offset: true,
+          border: {
+            color: 'red'
+          },
+          ticks: {
+            precision: 0
+          }
+        },
+        y1: {
+          type: 'linear',
+          position: 'left',
+          stack: '1',
+          offset: true,
+          border: {
+            color: 'green'
+          },
+          ticks: {
+            precision: 0
+          }
+        },
+        y2: {
+          type: 'linear',
+          position: 'left',
+          stack: '1',
+          offset: true,
+          border: {
+            color: 'blue',
+          },
+          ticks: {
+            precision: 0
+          }
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true,
+    canvas: {
+      height: 384,
+      width: 384
+    }
+  }
+};

test/fixtures/core.layouts/stacked-boxes-max.js

@@ -0,0 +1,109 @@
+module.exports = {
+  config: {
+    type: 'line',
+    data: {
+      datasets: [
+        {data: [{x: 1, y: 5}, {x: 2, y: 10}, {x: 3, y: 5}], borderColor: 'red'},
+        {data: [{x: 1, y: 5}, {x: 2, y: 10}, {x: 3, y: 5}], yAxisID: 'y1', xAxisID: 'x1', borderColor: 'green'},
+        {data: [{x: 1, y: 5}, {x: 2, y: 10}, {x: 3, y: 5}], yAxisID: 'y2', xAxisID: 'x2', borderColor: 'blue'},
+      ],
+      labels: ['tick1', 'tick2', 'tick3']
+    },
+    options: {
+      plugins: false,
+      scales: {
+        x: {
+          type: 'linear',
+          position: 'bottom',
+          stack: '1',
+          offset: true,
+          bounds: 'data',
+          border: {
+            color: 'red'
+          },
+          ticks: {
+            autoSkip: false,
+            maxRotation: 0,
+            count: 3
+          }
+        },
+        x1: {
+          type: 'linear',
+          position: 'bottom',
+          stack: '1',
+          offset: true,
+          bounds: 'data',
+          border: {
+            color: 'green'
+          },
+          ticks: {
+            autoSkip: false,
+            maxRotation: 0,
+            count: 3
+          }
+        },
+        x2: {
+          type: 'linear',
+          position: 'bottom',
+          stack: '1',
+          offset: true,
+          bounds: 'data',
+          border: {
+            color: 'blue'
+          },
+          ticks: {
+            autoSkip: false,
+            maxRotation: 0,
+            count: 3
+          }
+        },
+        y: {
+          type: 'linear',
+          position: 'left',
+          stack: '1',
+          offset: true,
+          border: {
+            color: 'red'
+          },
+          ticks: {
+            precision: 0
+          },
+          max: 7
+        },
+        y1: {
+          type: 'linear',
+          position: 'left',
+          stack: '1',
+          offset: true,
+          border: {
+            color: 'green'
+          },
+          ticks: {
+            precision: 0
+          },
+          max: 7
+        },
+        y2: {
+          type: 'linear',
+          position: 'left',
+          stack: '1',
+          offset: true,
+          border: {
+            color: 'blue',
+          },
+          ticks: {
+            precision: 0
+          },
+          max: 7
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true,
+    canvas: {
+      height: 384,
+      width: 384
+    }
+  }
+};