apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.11k stars 19.6k forks source link

Layer control for axis baseline and series data labels #15933

Closed hughess closed 1 month ago

hughess commented 2 years ago

What problem does this feature solve?

By default, the x axis baseline is positioned behind the bars in a bar chart. This can make the bottom of the chart look messy, especially when the bar color is light (you can see it overlapping the axis line more):

CleanShot 2021-10-22 at 15 30 52

A workaround is to add a high z value to the axis line to bring it to the front:

CleanShot 2021-10-22 at 15 30 31

This doesn’t work if there are data labels close to the axis line - the axis line will overlap the label: CleanShot 2021-10-22 at 15 33 53

One way to solve this would be to add a z property to the data label element, so you can position the bars at the back, the axis baseline on top of those, and the bar labels on the very top. I assume an issue with this approach would be if it's not possible to separate the z values for individual graphic elements inside the same parent element.

What does the proposed API look like?

Add a z property to the series data labels.

echarts-bot[bot] commented 2 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 to our mailing list.

Have a nice day! 🍵

ZeekoZhu commented 2 years ago

I'm facing a similar issue, to avoid the axis line being overwritten by the bar chart, I set a higher z to the x-axis, but it also brings split lines up.

Adding a z property to the split lines is also necessary so that I can set a higher z to the axis line and a lower z to split lines.

image

github-actions[bot] commented 1 month ago

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[bot] commented 1 month ago

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!