[Bug] Inability to show right-most X axis label on bar charts

[battlebeast01]

Version

5.2.2

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?c=bar-y-category&code=PYBwLglsB2AEC8sDeAoWtJgDYFMBcya6GOAHmAQOQDqwATlgCawAKoArlgIaQyVEBfADREwwYFkggCqYhjoQA5opx0qXUhADOlEXI3a2EaGFUyicsAE8Q-WJS0ALLo2AB3fnIGC9sXCuhGGWEiRQUgwjlcADMKewBmAFJdC1gFRUc4ygBGZN90ACNgMDEAWyoklLkAYxgwLmMAGS4CnCwCMDp2HB8iUgBBTS1zSxs7SgA3LixuquIi9kCuOisAcS5pWABtAAYhWB2AOh3sgF1e9CtB7RHia1sqap4cRXorOfRGHi4CLcoAIToXAAXhAsLp7ABJQIwHBaCBcCGUACqAGV-kjoYwEUiAMKOYyI_Y0ehMSjndAhdBaVQQOG_VKyOSwaBcUrjABMJ2yHzuYyoBWWvM-31-2QAHFz4vsOfEACzigCcMsVO3l-2yOzlioA7HtYNl4tkdXK5fsAGzxHaynanfLEbitdqRZnUxzuDpdHD2uQgYDw3jQKjpTKeZneLz2plyVnsqhc7Ic4UYfn2QV0ZNfepixXxDkAVhl8vi4v2Rp2FY1HOy-cVZoN8uycuyFvFEp2OrtqVd6EdbVurqcHvk3R9xD9AagQfsIbAYa8qQjsHOAgA3EA

Steps to Reproduce

1. Create a bar chart.
2. Label position is set to right and and the right grid is set to '1%'
3. Grid and Series/Label options

Current Behavior

When the the x-axis label at the the very right is very long or has a big font size some part of it can become invisible, or cut in half.

Expected Behavior

The issue can be corrected by increasing or decreasing the grid percentage, but then, the labels on the right end of the bars can become invisible as well. And it can cause a big gap on the right hand side.
What is expected: the x-axis label at the very right can be hidden without the loss of series labels.

Environment

- OS:Linux Ubuntu 22.04
- Browser:Chrome 96.0.4664.55
- Framework: Vue@2.6.14

Any additional comments?

No response

[helgasoft]

grid: {containLabel: true} fixes it all (no grid.right)

[battlebeast01]

grid: {containLabel: true} fixes it all (no grid.right)

In the above link i provided containLabel is set to true, but still, you can only see half of the rightmost x-axis label. The problem still persists.
İf we don't use grid.right and set containLabels to true it does solve the issue but the rightmost gap widens and gives a very unprofessional look.

[helgasoft]

You could play with grid.width in %, but still narrow screens will have the problem.

  grid: {
    left: 5, 
    width:'93%',
    bottom: '3%',
    containLabel: true
  }

[battlebeast01]

You could play with grid.width in %, but still narrow screens will have the problem.

  grid: {
    left: 5, 
    width:'93%',
    bottom: '3%',
    containLabel: true
  }

yes, there are hard-coded solutions for the above problem (ie. grid.right, grid.containLabel etc.). What all these solutions have in common is to increase the rightmost gap, but as you said in narrow screens or when a bigger font size is used for the labels, these approaches does not always work effectively.
Can the Echarts crew develop a dynamic/reactive solution for these kinds of scenarios?

[battlebeast01]

width:'93%',

@helgasoft Echarts has collusion preventing properties like xAxis.boundaryGap and position.hideOverlap. These options works regardless of screen size. Can we have a similar one for the rightmost x-axis label?
It is true that if we omit grid.right and set containLabel to true the problem is solved. But the rightmost gap is default and set to a very large value. As you said it can be modified with grid.width, but again it does not work for all screen sizes. The above mentioned properties (ie. boundaryGap, hideOverlap etc.) work for every screen size. Can we have a similar property for this specific scenario that created this bug report?

[github-actions]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.