echarts New Feature: axisLabel.autoRotate

trafficstars

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();
  }
  ...
}

May 19 '21 16:05 ataft

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 [email protected]. 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! 🍵

May 19 '21 16:05 echarts-bot[bot]

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:

May 19 '21 17:05 ataft

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

May 03 '22 11:05 akhilshastri

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

Jun 12 '22 08:06 DavidMarquezF

+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)