New Feature: axisLabel.autoRotate

apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser

https://echarts.apache.org

Apache License 2.0

60.58k stars 19.62k forks source link

New Feature: axisLabel.autoRotate #14996

Open ataft opened 3 years ago

ataft commented 3 years ago

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:

axisLabel.interval=0 will cause collision, like this:

In my opinion, autoRotate will go from 0 to 45 to 90 degrees, depending on the fit, like this:

What does the proposed API look like?

axisLabel.rotate = () => {
  if(this.doesNotFit && this.autoRotate) {
    this.rotate = calcRotateDegrees();
  }
  ...
}

echarts-bot[bot] commented 3 years ago

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 it contains a minimum reproducible demo and necessary images to illustrate. Otherwise, our committers will ask you to do so.

A minimum reproducible demo should contain as little data and components as possible but can still illustrate your problem. This is the best way for us to reproduce it and solve the problem faster.

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 dev@echarts.apache.org. Please attach the issue link if it's a technical question.

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

Have a nice day! 🍵

ataft commented 3 years ago

If axisLabel.autoRotate is implemented, then issue https://github.com/apache/echarts/issues/9265 needs to be resolved so that axis name and axis label do not overlap, as shown here:

akhilshastri commented 2 years ago

it seems must to have, is there any workaround meanwhile ..?

DavidMarquezF commented 2 years ago

sadly it doesn't look like it. I guess the best thing you can do is listen to size change and then rotate the labels yourself, but it will not be the most robust solution

TuringLovesDeathMetal commented 2 years ago

+1 for this issue. We've had loads of users requesting that the labels don't overlap, but are all shown!

Also love the implementation suggested by @ataft (i.e. If labels overlap at 0 degrees, rotate them to 45 degrees, then once the labels overlap at 45 degrees, we should rotate them to 90 degrees)

I'd also add that if labels overlap at 90 degrees, then remove all labels (or go back to the auto labels where values are skipped)