axis name and label overlaps when the nameLocation is 'center' or 'middle'

[ihakh]

Version

4.7.0

Steps to reproduce

in this example https://echarts.apache.org/examples/en/editor.html?c=watermark add these lines to yAxis:

        name:'some longe name',
        nameLocation:'center',

What is expected?

the name comes after the longest label name automatically

What is actually happening?

the name and label overlaps

---

we can fix it by nameGap for a certain resolution but it is not dynamic and on different resolution the it may be wrong besides when using a dynamic charts when the label length is unknown we can not be sure how much nameGap we must consider

[echarts-bot[bot]]

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to [email protected]. Please attach the issue link if it's a technical questions.

If you are interested in the project, you may also subscribe our mail list.

Have a nice day! 🍵

[yufeng04]

This configuration item should be enhanced. Maybe you can use nameGap temporarily.

[tsanie]

I have the same issue, waiting for an option like grid.containLabel.

[ArturMiszkowicz]

i have same issue, i think if nameLocation: middle, it should automatically calculate axis longest label and place name accordingly

[locinus]

Same here. Any development? That renders terribly, and calculating manually nameGap is quite error-prone.

[c3-anerishah]

Having the same issue, wondering if there is an enhancement in progress?

[Peque]

Worth noting @rephus's workaround (for those waiting for this to be implemented in ECharts): https://github.com/lightdash/lightdash/pull/2730 :blush:

[benliu723]

两年了咋没进展呢, 我还以为是我没找到配置, 原来确实没有自动计算标题位置. 这可就难受了,如果每个chart都需要手动给个nameGap, 那得多难受!

[wozien]

两年了咋没进展呢, 我还以为是我没找到配置, 原来确实没有自动计算标题位置. 这可就难受了,如果每个chart都需要手动给个nameGap, 那得多难受!

不止两年了，16年就有兄弟提了

[JunYang-tes]

The nameGap is not a good workaround because it can cause the axis name to shift left and right during data zooming, and it may still overlap with the axis labels. A better approach is to avoid using the axis-related name configuration and instead use the graphic component (in combination with grid.containLabel, which works well). For the y-axis:

{
  type: "text",
  left: 10,
  top: "center",
  rotation: Math.PI / 2,
  style: { text: "Y axis" }
}

For x-axis:

{
  type: "text",
  left: "center",
  bottom: "50", // in my case
  rotation: Math.PI / 2,
  style: { text: "X axis" }
}

You will get something like this:

[nick-delirium]

This five year old issue is still there. Any progress or updates?

[oberhamsi]

works for me now with the new outerBoundsMode and outerBoundsContain: axisLabel (instead of old containLabel which didn't help)

[codeusb]

This should work