Skip to content

Commit 79f1a0a

Browse files
stockiNailstockiNail
authored
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
1 parent 095a984 commit 79f1a0a

File tree

8 files changed

+249
-6
lines changed

8 files changed

+249
-6
lines changed

‎docs/axes/cartesian/_common.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ Namespace: `options.scales[scaleId]`
55
| Name | Type | Default | Description
66
| ---- | ---- | ------- | -----------
77
| `bounds` | `string` | `'ticks'` | Determines the scale bounds. [more...](./index.md#scale-bounds)
8+
| `clip` | `boolean` | `true` | If true, clip the dataset drawing against the size of the scale instead of chart area
89
| `position` | `string` \| `object` | | Position of the axis. [more...](./index.md#axis-position)
910
| `stack` | `string` | | Stack group. Axes at the same `position` with same `stack` are stacked.
1011
| `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

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -101,16 +101,21 @@ function determineLastEvent(e, lastEvent, inChartArea, isClick) {
101101
return e;
102102
}
103103

104-
function getDatasetArea(meta) {
104+
function getSizeForArea(scale, chartArea, field) {
105+
return scale.options.clip ? scale[field] : chartArea[field];
106+
}
107+
108+
function getDatasetArea(meta, chartArea) {
105109
const {xScale, yScale} = meta;
106110
if (xScale && yScale) {
107111
return {
108-
left: xScale.left,
109-
right: xScale.right,
110-
top: yScale.top,
111-
bottom: yScale.bottom
112+
left: getSizeForArea(xScale, chartArea, 'left'),
113+
right: getSizeForArea(xScale, chartArea, 'right'),
114+
top: getSizeForArea(yScale, chartArea, 'top'),
115+
bottom: getSizeForArea(yScale, chartArea, 'bottom')
112116
};
113117
}
118+
return chartArea;
114119
}
115120

116121
class Chart {
@@ -796,7 +801,7 @@ class Chart {
796801
const ctx = this.ctx;
797802
const clip = meta._clip;
798803
const useClip = !clip.disabled;
799-
const area = getDatasetArea(meta) || this.chartArea;
804+
const area = getDatasetArea(meta, this.chartArea);
800805
const args = {
801806
meta,
802807
index: meta.index,

‎src/core/core.scale.defaults.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ export function applyScaleDefaults(defaults) {
1616
*/
1717
bounds: 'ticks',
1818

19+
clip: true,
20+
1921
/**
2022
* Addition grace added to max and reduced from min data value.
2123
* @since 3.0.0

‎src/types/index.d.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1171,6 +1171,11 @@ export interface CoreScaleOptions {
11711171
* @default false
11721172
*/
11731173
reverse: boolean;
1174+
/**
1175+
* Clip the dataset drawing against the size of the scale instead of chart area.
1176+
* @default true
1177+
*/
1178+
clip: boolean;
11741179
/**
11751180
* The weight used to sort the axis. Higher weights are further away from the chart area.
11761181
* @default true

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

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
module.exports = {
2+
config: {
3+
type: 'line',
4+
data: {
5+
datasets: [
6+
{data: [{x: 5, y: 1}, {x: 10, y: 2}, {x: 5, y: 3}], borderColor: 'red'},
7+
{data: [{x: 5, y: 1}, {x: 10, y: 2}, {x: 5, y: 3}], yAxisID: 'y1', xAxisID: 'x1', borderColor: 'green'},
8+
{data: [{x: 5, y: 1}, {x: 10, y: 2}, {x: 5, y: 3}], yAxisID: 'y2', xAxisID: 'x2', borderColor: 'blue'},
9+
],
10+
labels: ['tick1', 'tick2', 'tick3']
11+
},
12+
options: {
13+
plugins: false,
14+
scales: {
15+
x: {
16+
type: 'linear',
17+
position: 'bottom',
18+
stack: '1',
19+
offset: true,
20+
clip: false,
21+
bounds: 'data',
22+
border: {
23+
color: 'red'
24+
},
25+
ticks: {
26+
autoSkip: false,
27+
maxRotation: 0,
28+
count: 3
29+
},
30+
max: 7
31+
},
32+
x1: {
33+
type: 'linear',
34+
position: 'bottom',
35+
stack: '1',
36+
offset: true,
37+
clip: false,
38+
bounds: 'data',
39+
border: {
40+
color: 'green'
41+
},
42+
ticks: {
43+
autoSkip: false,
44+
maxRotation: 0,
45+
count: 3
46+
},
47+
max: 7
48+
},
49+
x2: {
50+
type: 'linear',
51+
position: 'bottom',
52+
stack: '1',
53+
offset: true,
54+
clip: false,
55+
bounds: 'data',
56+
border: {
57+
color: 'blue'
58+
},
59+
ticks: {
60+
autoSkip: false,
61+
maxRotation: 0,
62+
count: 3
63+
},
64+
max: 7
65+
},
66+
y: {
67+
type: 'linear',
68+
position: 'left',
69+
stack: '1',
70+
offset: true,
71+
clip: false,
72+
border: {
73+
color: 'red'
74+
},
75+
ticks: {
76+
precision: 0
77+
}
78+
},
79+
y1: {
80+
type: 'linear',
81+
position: 'left',
82+
stack: '1',
83+
offset: true,
84+
clip: false,
85+
border: {
86+
color: 'green'
87+
},
88+
ticks: {
89+
precision: 0
90+
}
91+
},
92+
y2: {
93+
type: 'linear',
94+
position: 'left',
95+
stack: '1',
96+
offset: true,
97+
clip: false,
98+
border: {
99+
color: 'blue',
100+
},
101+
ticks: {
102+
precision: 0
103+
}
104+
}
105+
}
106+
}
107+
},
108+
options: {
109+
spriteText: true,
110+
canvas: {
111+
height: 384,
112+
width: 384
113+
}
114+
}
115+
};

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

17.9 KB
Loading

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

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
module.exports = {
2+
config: {
3+
type: 'line',
4+
data: {
5+
datasets: [
6+
{data: [{x: 1, y: 5}, {x: 2, y: 10}, {x: 3, y: 5}], borderColor: 'red'},
7+
{data: [{x: 1, y: 5}, {x: 2, y: 10}, {x: 3, y: 5}], yAxisID: 'y1', xAxisID: 'x1', borderColor: 'green'},
8+
{data: [{x: 1, y: 5}, {x: 2, y: 10}, {x: 3, y: 5}], yAxisID: 'y2', xAxisID: 'x2', borderColor: 'blue'},
9+
],
10+
labels: ['tick1', 'tick2', 'tick3']
11+
},
12+
options: {
13+
plugins: false,
14+
scales: {
15+
x: {
16+
type: 'linear',
17+
position: 'bottom',
18+
stack: '1',
19+
offset: true,
20+
clip: false,
21+
bounds: 'data',
22+
border: {
23+
color: 'red'
24+
},
25+
ticks: {
26+
autoSkip: false,
27+
maxRotation: 0,
28+
count: 3
29+
}
30+
},
31+
x1: {
32+
type: 'linear',
33+
position: 'bottom',
34+
stack: '1',
35+
offset: true,
36+
clip: false,
37+
bounds: 'data',
38+
border: {
39+
color: 'green'
40+
},
41+
ticks: {
42+
autoSkip: false,
43+
maxRotation: 0,
44+
count: 3
45+
}
46+
},
47+
x2: {
48+
type: 'linear',
49+
position: 'bottom',
50+
stack: '1',
51+
offset: true,
52+
clip: false,
53+
bounds: 'data',
54+
border: {
55+
color: 'blue'
56+
},
57+
ticks: {
58+
autoSkip: false,
59+
maxRotation: 0,
60+
count: 3
61+
}
62+
},
63+
y: {
64+
type: 'linear',
65+
position: 'left',
66+
stack: '1',
67+
offset: true,
68+
clip: false,
69+
border: {
70+
color: 'red'
71+
},
72+
ticks: {
73+
precision: 0
74+
},
75+
max: 7
76+
},
77+
y1: {
78+
type: 'linear',
79+
position: 'left',
80+
stack: '1',
81+
offset: true,
82+
clip: false,
83+
border: {
84+
color: 'green'
85+
},
86+
ticks: {
87+
precision: 0
88+
},
89+
max: 7
90+
},
91+
y2: {
92+
type: 'linear',
93+
position: 'left',
94+
stack: '1',
95+
offset: true,
96+
clip: false,
97+
border: {
98+
color: 'blue',
99+
},
100+
ticks: {
101+
precision: 0
102+
},
103+
max: 7
104+
}
105+
}
106+
}
107+
},
108+
options: {
109+
spriteText: true,
110+
canvas: {
111+
height: 384,
112+
width: 384
113+
}
114+
}
115+
};

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

26.4 KB
Loading

0 commit comments

Comments
 (0)