xAxis Label Overlap

[dyoon-linevision]

Using v4.7.0:

After upgrading to v5.0.2:

Version

5.0.2

Steps to reproduce

• Upgrade to eCharts 5.0.2

• Use the following options for xAxis:

options.xAxis.push({
      gridIndex: ndx,
      type: 'time',
      axisLabel: {
            formatter: function (date, index) {
                  return DateTime.dateFormat(new Date(date), true)
            },
            showMaxLabel: false
      },
});

What is expected?

Expect the xAxis intervals to be spread out far enough so that the labels don't overlap.

What is actually happening?

After upgrading to eCharts v5, the labels now overlap. The chart options did not change.

[echarts-bot]

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 you have posted enough image to demo your request. 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! 🍵

[plainheart]

Thanks for your feedback. This is related to #13682 and #14266. It will probably be fixed in v5.1.0 or v5.2.0.

[JesperBalslev]

Any news?

[tomazk8]

Any more news? I have the same problem. I noticed that axis ticks are also irregularly placed which should not happen. I am using version 5.1.2. Custom formatter is used to generate the axis labels.

[plainheart]

@tomazk8 #15583 may fix this bug. But it was just merged and not released yet. It's planned in v5.2.1.

[tomazk8]

@plainheart Thanks a lot. I am anxiously waiting for the new version :). Do you already know when it'll be released?

[hannata]

when will it be fixed ? I'm using the v5.2.2 and it still overlaps

[tomazk8]

For us it works now with version 5.2.2 - well, sort of. What axis does now is that it simply hides the ones that overlap. It should rearange the layout of the axis instead because the result is not that good as it could be. The axis layout algorithm is in general implemented badly. I know that the problem is that you cannot calculate the tick positions directly because in order to check if two labels overlap, you already need the tick positions. I have implemented such an algorithm long time ago where I roughly estimated the tick positions, checked if texts overlap and if yes, increase the tick offset and continue until I got the correct positions. It usually took only a couple of cycles and produced perfect result.

[Wintermute79]

I had the same issue with 5.2.2 when using label type 'time'. For me it was fixed with setting xAxis.axisLabel.hideOverlap to true.

[Wintermute79]

I had the same issue with 5.2.2 when using label type 'time'. For me it was fixed with setting xAxis.axisLabel.hideOverlap to true.

Tip: if you have axis labels of different lengths (e.g. weekday names), pad the ends with spaces to the same length to get better results.

[github-actions]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

[github-actions]

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!