Add clip option to scale configuration to allow unclipped scales (#11404

)

* Add clip option to scale configuration to allow unclipped scales

* add images

* fix cc

* change name of function

docs/axes/cartesian/_common.md

@@ -5,6 +5,7 @@ Namespace: `options.scales[scaleId]`
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
 | `bounds` | `string` | `'ticks'` | Determines the scale bounds. [more...](./index.md#scale-bounds)
+| `clip` | `boolean` | `true` | If true, clip the dataset drawing against the size of the scale instead of chart area
 | `position` | `string` \| `object` | | Position of the axis. [more...](./index.md#axis-position)
 | `stack` | `string` | | Stack group. Axes at the same `position` with same `stack` are stacked.
 | `stackWeight` | `number` | 1 | Weight of the scale in stack group. Used to determine the amount of allocated space for the scale within the group.

src/core/core.controller.js

@@ -101,16 +101,21 @@ function determineLastEvent(e, lastEvent, inChartArea, isClick) {
   return e;
 }
 
-function getDatasetArea(meta) {
+function getSizeForArea(scale, chartArea, field) {
+  return scale.options.clip ? scale[field] : chartArea[field];
+}
+
+function getDatasetArea(meta, chartArea) {
   const {xScale, yScale} = meta;
   if (xScale && yScale) {
     return {
-      left: xScale.left,
-      right: xScale.right,
-      top: yScale.top,
-      bottom: yScale.bottom
+      left: getSizeForArea(xScale, chartArea, 'left'),
+      right: getSizeForArea(xScale, chartArea, 'right'),
+      top: getSizeForArea(yScale, chartArea, 'top'),
+      bottom: getSizeForArea(yScale, chartArea, 'bottom')
     };
   }
+  return chartArea;
 }
 
 class Chart {
@@ -796,7 +801,7 @@ class Chart {
     const ctx = this.ctx;
     const clip = meta._clip;
     const useClip = !clip.disabled;
-    const area = getDatasetArea(meta) || this.chartArea;
+    const area = getDatasetArea(meta, this.chartArea);
     const args = {
       meta,
       index: meta.index,

src/core/core.scale.defaults.js

@@ -16,6 +16,8 @@ export function applyScaleDefaults(defaults) {
      */
     bounds: 'ticks',
 
+    clip: true,
+
     /**
      * Addition grace added to max and reduced from min data value.
      * @since 3.0.0

src/types/index.d.ts

@@ -1171,6 +1171,11 @@ export interface CoreScaleOptions {
    * @default false
    */
   reverse: boolean;
+  /**
+   * Clip the dataset drawing against the size of the scale instead of chart area.
+   * @default true
+   */
+  clip: boolean;
   /**
    * The weight used to sort the axis. Higher weights are further away from the chart area.
    * @default true

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

@@ -0,0 +1,115 @@
+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,
+          clip: false,
+          bounds: 'data',
+          border: {
+            color: 'red'
+          },
+          ticks: {
+            autoSkip: false,
+            maxRotation: 0,
+            count: 3
+          },
+          max: 7
+        },
+        x1: {
+          type: 'linear',
+          position: 'bottom',
+          stack: '1',
+          offset: true,
+          clip: false,
+          bounds: 'data',
+          border: {
+            color: 'green'
+          },
+          ticks: {
+            autoSkip: false,
+            maxRotation: 0,
+            count: 3
+          },
+          max: 7
+        },
+        x2: {
+          type: 'linear',
+          position: 'bottom',
+          stack: '1',
+          offset: true,
+          clip: false,
+          bounds: 'data',
+          border: {
+            color: 'blue'
+          },
+          ticks: {
+            autoSkip: false,
+            maxRotation: 0,
+            count: 3
+          },
+          max: 7
+        },
+        y: {
+          type: 'linear',
+          position: 'left',
+          stack: '1',
+          offset: true,
+          clip: false,
+          border: {
+            color: 'red'
+          },
+          ticks: {
+            precision: 0
+          }
+        },
+        y1: {
+          type: 'linear',
+          position: 'left',
+          stack: '1',
+          offset: true,
+          clip: false,
+          border: {
+            color: 'green'
+          },
+          ticks: {
+            precision: 0
+          }
+        },
+        y2: {
+          type: 'linear',
+          position: 'left',
+          stack: '1',
+          offset: true,
+          clip: false,
+          border: {
+            color: 'blue',
+          },
+          ticks: {
+            precision: 0
+          }
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true,
+    canvas: {
+      height: 384,
+      width: 384
+    }
+  }
+};

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

@@ -0,0 +1,115 @@
+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,
+          clip: false,
+          bounds: 'data',
+          border: {
+            color: 'red'
+          },
+          ticks: {
+            autoSkip: false,
+            maxRotation: 0,
+            count: 3
+          }
+        },
+        x1: {
+          type: 'linear',
+          position: 'bottom',
+          stack: '1',
+          offset: true,
+          clip: false,
+          bounds: 'data',
+          border: {
+            color: 'green'
+          },
+          ticks: {
+            autoSkip: false,
+            maxRotation: 0,
+            count: 3
+          }
+        },
+        x2: {
+          type: 'linear',
+          position: 'bottom',
+          stack: '1',
+          offset: true,
+          clip: false,
+          bounds: 'data',
+          border: {
+            color: 'blue'
+          },
+          ticks: {
+            autoSkip: false,
+            maxRotation: 0,
+            count: 3
+          }
+        },
+        y: {
+          type: 'linear',
+          position: 'left',
+          stack: '1',
+          offset: true,
+          clip: false,
+          border: {
+            color: 'red'
+          },
+          ticks: {
+            precision: 0
+          },
+          max: 7
+        },
+        y1: {
+          type: 'linear',
+          position: 'left',
+          stack: '1',
+          offset: true,
+          clip: false,
+          border: {
+            color: 'green'
+          },
+          ticks: {
+            precision: 0
+          },
+          max: 7
+        },
+        y2: {
+          type: 'linear',
+          position: 'left',
+          stack: '1',
+          offset: true,
+          clip: false,
+          border: {
+            color: 'blue',
+          },
+          ticks: {
+            precision: 0
+          },
+          max: 7
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true,
+    canvas: {
+      height: 384,
+      width: 384
+    }
+  }
+};