xAxis.nameGap and yAxis.nameGap should be set automatically given grid.containLabel

[jbadilla]

xAxis.nameGap and yAxis.nameGap should be set automatically given grid.containLabel; this would provide the user with an easy way to display his/her axis name in a way that it doesn't visually interfere with the axis labels

One-line summary [问题简述]

Version & Environment [版本及环境]

• ECharts version [ECharts 版本]:
• Browser version [浏览器类型和版本]:
• OS Version [操作系统类型和版本]:

Expected behaviour [期望结果]

When containLabel is selected, and a name for the xAxis or the yAxis has been specified, these should always fit on the graph's rendering, taking into account the 'rotate' property of the axis labels.

ECharts option [ECharts配置项]

if:

option = {
    grid.containLabel = true
    xAxis.axisLabel.rotate: someValue
    yAxis.axisLabel.rotate: someValue
}

then:

option = {
    grid.containLabel : true
    xAxis.axisLabel.rotate: someValue
    yAxis.axisLabel.rotate: someValue
    xAxis.nameGap : auto //should be set automatically
    yAxis.nameGap :  auto //should be set automatically
}

Other comments [其他信息]

[deqingli]

sorry, I don't quite understand what you mean, can you show me the ECharts option and the effect picture you want.

[jbadilla]

Certainly! I have included the option in the original post.

Explanation: I would like for the x-axis and y-axis names to be set based on the 'rotate' value of the axisLabel property inside xAxis and yAxis.

Justification: This is because sometimes the yAxis or xAxis labels overlaps with the yAxis or xAxis name. This is visually unpleasant, and it should be a standard feature that it automatically sets xAxis.nameGap and yAxis.nameGap so that it is not being overlapped by the axis labels.

How it should look:

[Ovilia]

Do you mean that you want to rotate the axis name or where do you want to place it? Sorry I didn't quite follow.

[jbadilla]

Here is how echarts behaves by default:

Here's how it should behave:

This has to be done by setting the xAxis.nameGap property to something reasonable

[100pah]

Currenly containLabel only considered axis labels, but not consider axis name.

@jbadilla

This axis lable is visually unpleasant because the default nameGap is 0.

Another issue #9286 gave a related situation that the axis name might overflow the rendering area.

To make the layout wisely, I think two enhancements can be taken into accout (and the two enhancement might be independent with each other in implementation):

(A) Enhanse the layout calculation of axis name: adjust it based on axis label and viewport.

Keep the current behaviors of nameLocation and nameGap, and add a new option nameLocationAdjust (or some likely name), which enable axis name to be auto adjusted to avoid interfering with axis labels and overflow the viewport, following the strategy below:

Procedure X:
Layout axis name by the given nameLoation and nameGap, and then adjust it to avoid interfering with axis labels. Finally the relative location of axis name with axis line get. Detailedly, in this case, nameGap is not the gap with axis line any more, but actually is the gap with the bounding rect of both axis line and axis labels.

Procedure X will be executed twices if containLabel is set, the same as current implementation:
1. The first execution is before the "coordinate system update stage", based on the estinamed axis label layout.
2. The second execution is on the "cartesian rendering stage", based on the accrate axis label layout.

Procedure Y:
Ajust the axis name to avoid overflowing the viewport (if it makes the axis name interfere with axis labels again, leave them there). Notice the overflow also need to be taken into account when nameLocation is start or end, like #9286 issued, which enables that when two cartesian exists axes align with each other without dynamic axis names overflow.

Procedure Y is only be executed in the "cartesian rendering stage", after Procedure X executed.

(B) Enhanse the cartesian rect determine calculation when containLabel

Currently containLabel has considdered axis label (and rotation). We should make it take into account the located axis name also, whatever the (A) is implemented or not.

But the logic looks not neat, a little complecated :(

What do you think @pissang

[sunzy0212]

Currently, is there any workaround?

[jbadilla]

The workaround was offered in @100pah 's answer.

That being said, the 'nameGap' property is – in my opinion – flawed, because the property should not really exist.
Rather, the 'nameGap' should be calculated internally, taking into account the length of the 'xAxis.axisLabels' and 'yAxis.axisLabels', as well as the 'rotate' property, which says how much labels should be rotated.

Any ideas?