Skip to content

Commit c51d697

Browse files
stockiNailLeeLenaleee
stockiNail
and
LeeLenaleee
authored
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>
1 parent 740ae60 commit c51d697

File tree

6 files changed

+232
-2
lines changed

6 files changed

+232
-2
lines changed

‎.size-limit.cjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ function modifyWebpackConfig(config) {
77
module.exports = [
88
{
99
path: 'dist/chart.js',
10-
limit: '77.2 KB',
10+
limit: '77.5 KB',
1111
webpack: false,
1212
running: false
1313
},

‎src/core/core.controller.js‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,18 @@ function determineLastEvent(e, lastEvent, inChartArea, isClick) {
101101
return e;
102102
}
103103

104+
function getDatasetArea(meta) {
105+
const {xScale, yScale} = meta;
106+
if (xScale && yScale) {
107+
return {
108+
left: xScale.left,
109+
right: xScale.right,
110+
top: yScale.top,
111+
bottom: yScale.bottom
112+
};
113+
}
114+
}
115+
104116
class Chart {
105117

106118
static defaults = defaults;
@@ -784,7 +796,7 @@ class Chart {
784796
const ctx = this.ctx;
785797
const clip = meta._clip;
786798
const useClip = !clip.disabled;
787-
const area = this.chartArea;
799+
const area = getDatasetArea(meta) || this.chartArea;
788800
const args = {
789801
meta,
790802
index: meta.index,

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

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
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+
bounds: 'data',
21+
border: {
22+
color: 'red'
23+
},
24+
ticks: {
25+
autoSkip: false,
26+
maxRotation: 0,
27+
count: 3
28+
},
29+
max: 7
30+
},
31+
x1: {
32+
type: 'linear',
33+
position: 'bottom',
34+
stack: '1',
35+
offset: true,
36+
bounds: 'data',
37+
border: {
38+
color: 'green'
39+
},
40+
ticks: {
41+
autoSkip: false,
42+
maxRotation: 0,
43+
count: 3
44+
},
45+
max: 7
46+
},
47+
x2: {
48+
type: 'linear',
49+
position: 'bottom',
50+
stack: '1',
51+
offset: true,
52+
bounds: 'data',
53+
border: {
54+
color: 'blue'
55+
},
56+
ticks: {
57+
autoSkip: false,
58+
maxRotation: 0,
59+
count: 3
60+
},
61+
max: 7
62+
},
63+
y: {
64+
type: 'linear',
65+
position: 'left',
66+
stack: '1',
67+
offset: true,
68+
border: {
69+
color: 'red'
70+
},
71+
ticks: {
72+
precision: 0
73+
}
74+
},
75+
y1: {
76+
type: 'linear',
77+
position: 'left',
78+
stack: '1',
79+
offset: true,
80+
border: {
81+
color: 'green'
82+
},
83+
ticks: {
84+
precision: 0
85+
}
86+
},
87+
y2: {
88+
type: 'linear',
89+
position: 'left',
90+
stack: '1',
91+
offset: true,
92+
border: {
93+
color: 'blue',
94+
},
95+
ticks: {
96+
precision: 0
97+
}
98+
}
99+
}
100+
}
101+
},
102+
options: {
103+
spriteText: true,
104+
canvas: {
105+
height: 384,
106+
width: 384
107+
}
108+
}
109+
};

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

16.2 KB
Loading

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

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
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+
bounds: 'data',
21+
border: {
22+
color: 'red'
23+
},
24+
ticks: {
25+
autoSkip: false,
26+
maxRotation: 0,
27+
count: 3
28+
}
29+
},
30+
x1: {
31+
type: 'linear',
32+
position: 'bottom',
33+
stack: '1',
34+
offset: true,
35+
bounds: 'data',
36+
border: {
37+
color: 'green'
38+
},
39+
ticks: {
40+
autoSkip: false,
41+
maxRotation: 0,
42+
count: 3
43+
}
44+
},
45+
x2: {
46+
type: 'linear',
47+
position: 'bottom',
48+
stack: '1',
49+
offset: true,
50+
bounds: 'data',
51+
border: {
52+
color: 'blue'
53+
},
54+
ticks: {
55+
autoSkip: false,
56+
maxRotation: 0,
57+
count: 3
58+
}
59+
},
60+
y: {
61+
type: 'linear',
62+
position: 'left',
63+
stack: '1',
64+
offset: true,
65+
border: {
66+
color: 'red'
67+
},
68+
ticks: {
69+
precision: 0
70+
},
71+
max: 7
72+
},
73+
y1: {
74+
type: 'linear',
75+
position: 'left',
76+
stack: '1',
77+
offset: true,
78+
border: {
79+
color: 'green'
80+
},
81+
ticks: {
82+
precision: 0
83+
},
84+
max: 7
85+
},
86+
y2: {
87+
type: 'linear',
88+
position: 'left',
89+
stack: '1',
90+
offset: true,
91+
border: {
92+
color: 'blue',
93+
},
94+
ticks: {
95+
precision: 0
96+
},
97+
max: 7
98+
}
99+
}
100+
}
101+
},
102+
options: {
103+
spriteText: true,
104+
canvas: {
105+
height: 384,
106+
width: 384
107+
}
108+
}
109+
};

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

21.5 KB
Loading

0 commit comments

Comments
 (0)