Skip to content

Commit 8b67ed6

Browse files
archmojarchmoj
authoredApr 17, 2024··
Merge pull request #6970 from my-tien/axis_title_standoff
Fix inconsistent axis title standoff when title is one text line vs. multiple lines
·
v3.0.1v2.32.0
2 parents 3a6e2d7 + cf69405 commit 8b67ed6

12 files changed

+171
-5
lines changed
 

‎draftlogs/6970_fix.md

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
- Fix positioning of multi-line axis titles with `standoff` [[#6970](https://github.com/plotly/plotly.js/pull/6970)],
2+
with thanks to @my-tien for the contribution!

‎src/plots/cartesian/axes.js

+13-4
Original file line numberDiff line numberDiff line change
@@ -4065,9 +4065,7 @@ function approxTitleDepth(ax) {
40654065
var fontSize = ax.title.font.size;
40664066
var extraLines = (ax.title.text.match(svgTextUtils.BR_TAG_ALL) || []).length;
40674067
if(ax.title.hasOwnProperty('standoff')) {
4068-
return extraLines ?
4069-
fontSize * (CAP_SHIFT + (extraLines * LINE_SPACING)) :
4070-
fontSize * CAP_SHIFT;
4068+
return fontSize * (CAP_SHIFT + (extraLines * LINE_SPACING));
40714069
} else {
40724070
return extraLines ?
40734071
fontSize * (extraLines + 1) * LINE_SPACING :
@@ -4098,9 +4096,20 @@ function drawTitle(gd, ax) {
40984096
var axLetter = axId.charAt(0);
40994097
var fontSize = ax.title.font.size;
41004098
var titleStandoff;
4099+
var extraLines = (ax.title.text.match(svgTextUtils.BR_TAG_ALL) || []).length;
41014100

41024101
if(ax.title.hasOwnProperty('standoff')) {
4103-
titleStandoff = ax._depth + ax.title.standoff + approxTitleDepth(ax);
4102+
// With ax._depth the initial drawing baseline is at the outer axis border (where the
4103+
// ticklabels are drawn). Since the title text will be drawn above the baseline,
4104+
// bottom/right axes must be shifted by 1 text line to draw below ticklabels instead of on
4105+
// top of them, whereas for top/left axes, the first line would be drawn
4106+
// before the ticklabels, but we need an offset for the descender portion of the first line
4107+
// and all subsequent lines.
4108+
if(ax.side === 'bottom' || ax.side === 'right') {
4109+
titleStandoff = ax._depth + ax.title.standoff + fontSize * CAP_SHIFT;
4110+
} else if(ax.side === 'top' || ax.side === 'left') {
4111+
titleStandoff = ax._depth + ax.title.standoff + fontSize * (MID_SHIFT + (extraLines * LINE_SPACING));
4112+
}
41044113
} else {
41054114
var isInside = insideTicklabelposition(ax);
41064115

‎test/image/baselines/axis-title-standoff.png

-145 Bytes
Loading

‎test/image/baselines/line_scatter_change_side.png

-16 Bytes
Loading

‎test/image/baselines/line_scatter_change_side_shrunk.png

-11 Bytes
Loading

‎test/image/baselines/line_scatter_regular_side.png

31 Bytes
Loading

‎test/image/baselines/line_scatter_regular_side_shrunk.png

-23 Bytes
Loading

‎test/image/baselines/mult-yaxes-simple.png

-1.13 KB
Loading

‎test/image/baselines/petrophysics.png

-236 Bytes
Loading

‎test/image/baselines/zz-axis_title_standoff0.png

44 KB
Loading

‎test/image/mocks/axis-title-standoff.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
},
2727
"yaxis": {
2828
"title": {
29-
"text": "Y<br>Axis (standoff:8)",
29+
"text": "Y<br>Axis (standoff:0)",
3030
"standoff": 0,
3131
"font": {"size": 8}
3232
},

‎test/image/mocks/zz-axis_title_standoff0.json

+155
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
{
2+
"data": [
3+
{
4+
"mode": "markers",
5+
"x": [
6+
100,
7+
200,
8+
300,
9+
400,
10+
500
11+
],
12+
"y": [
13+
200,
14+
300,
15+
400,
16+
500,
17+
600
18+
],
19+
"type": "scatter"
20+
},
21+
{
22+
"mode": "markers",
23+
"x": [
24+
100,
25+
200,
26+
300,
27+
400,
28+
500
29+
],
30+
"y": [
31+
200,
32+
300,
33+
400,
34+
500,
35+
600
36+
],
37+
"type": "scatter",
38+
"xaxis": "x2",
39+
"yaxis": "y2"
40+
},
41+
{
42+
"mode": "markers",
43+
"x": [
44+
100,
45+
200,
46+
300,
47+
400,
48+
500
49+
],
50+
"y": [
51+
200,
52+
300,
53+
400,
54+
500,
55+
600
56+
],
57+
"type": "scatter",
58+
"xaxis": "x3",
59+
"yaxis": "y3"
60+
},
61+
{
62+
"mode": "markers",
63+
"x": [
64+
100,
65+
200,
66+
300,
67+
400,
68+
500
69+
],
70+
"y": [
71+
200,
72+
300,
73+
400,
74+
500,
75+
600
76+
],
77+
"type": "scatter",
78+
"xaxis": "x4",
79+
"yaxis": "y4"
80+
}
81+
],
82+
"layout": {
83+
"width": 800,
84+
"legend": {
85+
"visible": false
86+
},
87+
"grid": {
88+
"rows": 2,
89+
"columns": 2,
90+
"pattern": "independent",
91+
"xgap": 0.4
92+
},
93+
"xaxis": {
94+
"title": {
95+
"text": "______xaxis______",
96+
"standoff": 0
97+
},
98+
"side": "top",
99+
"automargin": true
100+
},
101+
"xaxis3": {
102+
"title": {
103+
"text": "¯¯¯¯¯¯xaxis3¯¯¯¯¯¯",
104+
"standoff": 0
105+
},
106+
"automargin": true
107+
},
108+
"yaxis": {
109+
"title": {
110+
"text": "______yaxis______",
111+
"standoff": 0
112+
},
113+
"automargin": true
114+
},
115+
"yaxis3": {
116+
"title": {
117+
"text": "¯¯¯¯¯¯yaxis3¯¯¯¯¯¯",
118+
"standoff": 0
119+
},
120+
"side": "right",
121+
"automargin": true
122+
},
123+
"xaxis2": {
124+
"title": {
125+
"text": "xaxis2<br>some<br>more<br>______text______",
126+
"standoff": 0
127+
},
128+
"side": "top",
129+
"automargin": true
130+
},
131+
"xaxis4": {
132+
"title": {
133+
"text": "¯¯¯¯¯¯xaxis4¯¯¯¯¯¯<br>some<br>more<br>text",
134+
"standoff": 0
135+
},
136+
"side": "bottom",
137+
"automargin": true
138+
},
139+
"yaxis2": {
140+
"title": {
141+
"text": "¯¯¯¯¯¯yaxis2¯¯¯¯¯¯<br>some<br>more<br>text",
142+
"standoff": 0
143+
},
144+
"side": "right",
145+
"automargin": true
146+
},
147+
"yaxis4": {
148+
"title": {
149+
"text": "yaxis4<br>some<br>more<br>______text______",
150+
"standoff": 0
151+
},
152+
"automargin": true
153+
}
154+
}
155+
}

0 commit comments

Comments
 (0)
Please sign in to comment.