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

diff --git a/docs/axes/cartesian/_common.md b/docs/axes/cartesian/_common.md
index 1050a85a2a624d328b7d91f1b8527601ea283ad6..b6b5a8e12f4cc3e15a3238216c25f46e318e0b2b 100644 (file)
--- a/docs/axes/cartesian/_common.md
+++ b/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.

diff --git a/src/core/core.controller.js b/src/core/core.controller.js
index 2ba26c9f3eeea8b71c3a592301e79c444e199f1a..a54c5a03283c744fdceaa8a54d672f6164d40044 100644 (file)
--- a/src/core/core.controller.js
+++ b/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,

diff --git a/src/core/core.scale.defaults.js b/src/core/core.scale.defaults.js
index 85f9764ec0aa5374b3a7215f1af5147229e1ef89..b6798e094b69b1bcc939cbc168fd292d90818083 100644 (file)
--- a/src/core/core.scale.defaults.js
+++ b/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

diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 5cf2d0cc9021a3de4501c3f1fd838fd7f4ba5e52..eeee5fa08e5db60fe0ccfdf5c05284fd14fc4d45 100644 (file)
--- a/src/types/index.d.ts
+++ b/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

diff --git a/test/fixtures/core.layouts/stacked-boxes-max-index-without-clip.js b/test/fixtures/core.layouts/stacked-boxes-max-index-without-clip.js
new file mode 100644 (file)
index 0000000..8e2df9c
--- /dev/null
+++ b/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
+    }
+  }
+};

diff --git a/test/fixtures/core.layouts/stacked-boxes-max-index-without-clip.png b/test/fixtures/core.layouts/stacked-boxes-max-index-without-clip.png
new file mode 100644 (file)
index 0000000..0f7d329
Binary files /dev/null and b/test/fixtures/core.layouts/stacked-boxes-max-index-without-clip.png differ

diff --git a/test/fixtures/core.layouts/stacked-boxes-max-without-clip.js b/test/fixtures/core.layouts/stacked-boxes-max-without-clip.js
new file mode 100644 (file)
index 0000000..cdfc385
--- /dev/null
+++ b/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
+    }
+  }
+};

diff --git a/test/fixtures/core.layouts/stacked-boxes-max-without-clip.png b/test/fixtures/core.layouts/stacked-boxes-max-without-clip.png
new file mode 100644 (file)
index 0000000..dc2ab23
Binary files /dev/null and b/test/fixtures/core.layouts/stacked-boxes-max-without-clip.png differ