You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2022/11/10 15:54:33 UTC
[GitHub] [echarts] pasqualtroncone opened a new issue, #17902: Is there a way to prevent the axis name from automatically overlapping with its labels?
pasqualtroncone opened a new issue, #17902:
URL: https://github.com/apache/echarts/issues/17902
### Version
5.3.3
### Link to Minimal Reproduction
_No response_
### Steps to Reproduce
1. Go to [Heatmap on Cartesian](https://echarts.apache.org/examples/en/editor.html?c=heatmap-cartesian) chart example from project web page.
2. Add the following attributes to `yAxis` option: `name: 'Axis name'` and `nameLocation: 'center'`:
3. Press `Run` button at top and check how `Axis name` overlaps few labels:
### Current Behavior
Axis name overlaps its labels
### Expected Behavior
Axis name should appear right next to values
### Environment
```markdown
- OS: Any
- Browser: Chrome or Firefox. Latest versions
```
### Any additional comments?
I know we can use `nameGap` attribute, but in some cases there is no way to know how long the label will be.
Is there a way to get the "size" of the label space/boundaries?
--
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] zhaolei2013 commented on issue #17902: Is there a way to prevent the axis name from automatically overlapping with its labels?
Posted by GitBox <gi...@apache.org>.
zhaolei2013 commented on issue #17902:
URL: https://github.com/apache/echarts/issues/17902#issuecomment-1342357034
我这边也遇到了同样的问题。没找到解决办法，只能去手动计算刻度最大值的长度，然后动态地计算出相应的nameGap。
--
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
Re: [I] Is there a way to prevent the axis name from automatically overlapping with its labels? [echarts]
Posted by "vandelpavel (via GitHub)" <gi...@apache.org>.
vandelpavel commented on issue #17902:
URL: https://github.com/apache/echarts/issues/17902#issuecomment-1959516563
Basically what @zhaolei2013 states is true.
I had the same problem and I was not able to find a way to retrieve that value.
My workaround is to use the following config:
```ts
/** This represents the space dedicated to the YAxis name label which is required to avoid it overlapping with the following axis or overflowing outside the canvas */
const SPACE_FOR_Y_AXIS_NAME = 40;
/** The space reserved for YAxis tick labels before ellipsis. This also allows us to define part of the horizontal space occupied by one yYAxis */
const Y_AXIS_TICK_LABELS_MAX_WIDTH = 40;
const options = {
yAxis: {
name: "<axis_name>",
nameGap: Y_AXIS_TICK_LABELS_MAX_WIDTH,
nameTextStyle: {
padding: 4,
},
nameLocation: "middle",
axisLabel: {
hideOverlap: true,
overflow: "truncate",
width: Y_AXIS_TICK_LABELS_MAX_WIDTH,
},
// ...
},
grid: {
right: Y_AXIS_TICK_LABELS_MAX_WIDTH + SPACE_FOR_Y_AXIS_NAME,
left: Y_AXIS_TICK_LABELS_MAX_WIDTH + SPACE_FOR_Y_AXIS_NAME,
// Natively echarts supports dynamic spacings around the grid based on the length of the yaxis ticks
// unfortunately this only works for a maximum of 2 yaxis and if we want to manually handle spaces then we need to disable that feature
containLabel: false,
// ...
},
// ...
};
```
--
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