apache / apache/echarts

New Feature: axisLabel.autoRotate

Open
#14,996 17 comments 21 reactions 0 assignees View on GitHub
en new-feature
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### What problem does this feature solve?
If the axis labels do not fit, then autoRotate will automatically calculate axisLabel.rotate to make them fit.

`axisLabel.interval='auto'` will cause missing/skipped labels, like this:
![image](https://user-images.githubusercontent.com/11670864/118852720-de9f2700-b887-11eb-9886-3df6848f7f93.png)

`axisLabel.interval=0` will cause collision, like this:
![image](https://user-images.githubusercontent.com/11670864/118852506-b6172d00-b887-11eb-8720-fccd0694182b.png)

In my opinion, autoRotate will go from 0 to 45 to 90 degrees, depending on the fit, like this:
![image](https://user-images.githubusercontent.com/11670864/118853346-83216900-b888-11eb-9b25-dffb0020c5f8.png)

### What does the proposed API look like?
```
axisLabel.rotate = () => {
if(this.doesNotFit && this.autoRotate) {
this.rotate = calcRotateDegrees();
}
...
}

```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.