Time Axis is display can overlap in v5

[qortex]

Version

5.0.2

Reproduction link

https://echarts.apache.org/examples/en/editor.html?c=dynamic-data2

Steps to reproduce

Go to official example and reduce the window size. Then x axis labels will overlap and look crappy.

What is expected?

The ticks should gently disappear to let only a few appear.

What is actually happening?

Labels overlap and look crappy.

Example on my app:

Example in the official example:

---

Worked well in v4 (see https://echarts.apache.org/v4/examples/en/editor.html?c=dynamic-data2)

[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! 🍵

[qortex]

It looks like setting splitNumber to 5 is a workaround as far as I can tell (even though it's supposed to be the default according to the doc?)

[tmtron]

Unfortunately the workaround (setting xAxis.splitNumber to 5) does not work for me: see this example echarts versin 5.2.0

Quote from the splitNumber docs:

Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.

So I tried xAxis.interval:

Compulsively set segmentation interval for axis.
As splitNumber is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with min and max to compulsively set tickings.

But this does also not work

Also xAxis.axisLabel.interval had no effect.

Any idea why this is not working in my example?

[pissang]

I think interval breaks in the new time axis. We will fix it in the later versions.

[echarts-bot]

This issue is labeled with priority: high, which means it's a frequently asked problem and we will fix it ASAP.

[szilard-dobai]

Any news on this bugfix? :)

[svedova]

We'd like to use the upgraded version at GitLab however this bug is a blocker for us. I'd like to help and submit a PR. Is there any link to any discussion @pissang, where I could have more insight on where to look?

Seems like this happens mostly with the Time based labels and it seems like the day/month are not evenly spaced:

If you check here, the left space between July and 29 is not the same as July and 8 in the X axis. Can this be related?

[pissang]

@svedova Hi, Thanks for helping fix it. There is a helper function that can hide the overlapped labels.

https://github.com/apache/echarts/blob/master/src/label/labelLayoutHelper.ts#L289

The labelList parameters can be prepared by the helper function prepareLayoutList in the same file. What you need is to give a list with label and priority in each item. For better display. The priority of each label should be:

year > month > day > hour > minutes > second > millesecond

Feel free to ask in this thread if you have any more questions:)

[svedova]

@pissang thanks for the help!

At which state am I supposed to use the prepareLayoutList function?

Initially I thought I would alter the Time.ts file but as far as I can tell, all it does is to return a list of string labels when getLabel and getFormattedLabel is called. When I trace the call stack, it seems like AxisBuilder.ts creates a list of ZRTexts here: https://github.com/apache/echarts/blob/master/src/component/axis/AxisBuilder.ts#L342

Is it a good place to use the prepareLayoutList and hideOverlap helpers?

Another question, prepareLayoutList expects a few more properties than label and priority (ref: https://github.com/apache/echarts/blob/master/src/label/labelLayoutHelper.ts#L25). How do I populate the other properties?

Unfortunately there are not many examples in the codebase using these two helpers (only the LabelManager seems to use them), so a little help would be highly appreciated here 🙏

[pissang]

@svedova Sorry for the late reply.

Usually, prepareLayoutList and hideOverlap are called when all labels are created and prepared, prepared means all properties like transform, font are set so the method can get the correct oriented bounding rect. For axis, I think it can be https://github.com/apache/echarts/blob/master/src/component/axis/CartesianAxisView.ts#L102

Some properties of LabelLayoutListPrepareInput are optional. The type is a bit misleading, it should be:

interface LabelLayoutListPrepareInput {
    label: ZRText
    labelLine?: Polyline
    computedLayoutOption?: LabelLayoutOption
    priority: number
    defaultAttr: {
        ignore: boolean
        labelGuideIgnore?: boolean
    }
}

defaultAttr.ignore can use label.ignore here.