You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by "battlebeast01 (via GitHub)" <gi...@apache.org> on 2023/05/30 11:17:46 UTC
[GitHub] [echarts] battlebeast01 opened a new issue, #18684: [Bug] Inability to show right-most X axis label on bar charts
battlebeast01 opened a new issue, #18684:
URL: https://github.com/apache/echarts/issues/18684
### 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
```markdown
- OS:Linux Ubuntu 22.04
- Browser:Chrome 96.0.4664.55
- Framework: Vue@2.6.14
```
### Any additional comments?
_No response_
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] helgasoft commented on issue #18684: [Bug] Inability to show right-most X axis label on bar charts
Posted by "helgasoft (via GitHub)" <gi...@apache.org>.
helgasoft commented on issue #18684:
URL: https://github.com/apache/echarts/issues/18684#issuecomment-1570594372
You could play with _grid.width_ in %, but still narrow screens will have the problem.
```
grid: {
left: 5,
width:'93%',
bottom: '3%',
containLabel: true
}
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] battlebeast01 commented on issue #18684: [Bug] Inability to show right-most X axis label on bar charts
Posted by "battlebeast01 (via GitHub)" <gi...@apache.org>.
battlebeast01 commented on issue #18684:
URL: https://github.com/apache/echarts/issues/18684#issuecomment-1569836924
> `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 presists.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] battlebeast01 commented on issue #18684: [Bug] Inability to show right-most X axis label on bar charts
Posted by "battlebeast01 (via GitHub)" <gi...@apache.org>.
battlebeast01 commented on issue #18684:
URL: https://github.com/apache/echarts/issues/18684#issuecomment-1589217395
> 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?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] helgasoft commented on issue #18684: [Bug] Inability to show right-most X axis label on bar charts
Posted by "helgasoft (via GitHub)" <gi...@apache.org>.
helgasoft commented on issue #18684:
URL: https://github.com/apache/echarts/issues/18684#issuecomment-1568811005
```grid: {containLabel: true}``` fixes it all (no left,right,etc.)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] helgasoft commented on issue #18684: [Bug] Inability to show right-most X axis label on bar charts
Posted by "helgasoft (via GitHub)" <gi...@apache.org>.
helgasoft commented on issue #18684:
URL: https://github.com/apache/echarts/issues/18684#issuecomment-1570578151
as I said "no grid.right", it conflicts with _grid.containLabel_. Comment out _grid.right_ to see result:
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] battlebeast01 commented on issue #18684: [Bug] Inability to show right-most X axis label on bar charts
Posted by "battlebeast01 (via GitHub)" <gi...@apache.org>.
battlebeast01 commented on issue #18684:
URL: https://github.com/apache/echarts/issues/18684#issuecomment-1573662115
> 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?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org