apache / apache/echarts

[Bug] markArea not displayed correctly when resizing

Open
#20,420 4 comments 1 reaction 0 assignees View on GitHub
bug en pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### Version

5.5.1

### Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?c=line-simple&code=MYewdgzgLgBGCuBbARgUwE4HkBmAFEAlmFBDALwwCMATAAwDcAUM6JLAB4CC7BEAIgEMoA8jE7p0AgJ4A6bOhCIAFAG8YAG1RgA5lAAWALjhI0WPIWKkAvgBoYSgG4D18VHaIATVOwCU5AHwwnt4-TKzQMJJgHoqCwqJcPPxCAjKIAgAOSuwBMACyQnoyUTHKfgBU9pQArLQwALQwdH4A1E20ocwgGVAE4KIqjDAwUCAg6r0ZRoPDw1DoBNraGEYA5AJJqzZDsxu8-ERQKzAzs8MCYATpveBG2M4QqDvDVju2O5rL0dPPMB4pRgA2qsAKJODIgSQ3MBbGCrABKAiI93U6lWAF1tmdNNgoEZKLQ3liRmN1MgQOwfmdsKghPB0KgqWc_ikAFpjRBM5kwKTcXgASWi3jWYHAqFWvxexLODOgkMZJ3e3IgAgcqE4EH56WW01eZz1MCVMD2EAOxGOp2G6iIAGsgZKTg7hokBULKXDnGiHQbhuiiTsXRAuSMpBkFatgEJUNpIVItr9_sIjIG4gJ_cNeUldcTHgtUEGYIDfpbZomBEYSrEUtLZlBQ-HkAJ0PHuel0DbxLTg2cIARNMQjPNXDWzgQjogAMp1zTd5ndATAMdSIy0GQAZidhpHpYBhc3wyL3O5JaPszAAkQ4YA4gytC3T8yx6hJ9OFSeH8NQOpIWttLeYfuzJGh-zp8gWhIgVugHDO-p6Bvi0GGoBmKAYeIGwUe56Xms8KoB496QU-L5SDOjqQWcX4_nCDL4YhUp0TA8FNIhwEPhh3JMQALCxyHbmcaEfuxzJYeGACaqCoiAADuBEgURU4kW-DGfuMVGrFIEnfjJDGsR-THVCxfHMkJZxMQAbDxH4oR-AlsQxIlrAAQi44pGdy8mvrOH6UegazIC5ErkVBQVMQA7IZiEmbMTF0JZD7WQ-tmnlFwwOXCN6oHebmPuOCmkSlsw-b-_6BeRukPjFlARZBBUxQZkE-keCWnklR4FWlqzOa4skfh5ileQ-RVwv53U6dlplgUY1AWQ141keRTEAByLXFp7Ncyfrco1Bp-lY9BAA&random=ijkr0n6dyg&version=5.5.1&renderer=svg

### Steps to Reproduce

The problem appears when there are a lot of points on the chart, and the window size is small enough.

In the above example:
1. resize the chart area or adjust the 'numberOfPoints' variable in the example
2. colored ares are not behind the same datapoints as they were before the change

### Current Behavior

When X-axis has a lot of points on the chart and/or chart window is small enough, the markArea background is not displayed in the correct spot.

![output](https://github.com/user-attachments/assets/5989968a-7c66-424a-a5c5-f7b9614fb3df)
Background colors move as the chart is resized. The most obvious one is yellow - it should be behind points 5 and 6, but sometimes disappears completely and sometimes it is shown over points 4 and 7 as well.

Zoomed in view(using the dataZoom tool) is shown correctly:
![Screenshot 2024-10-14 at 13 08 57](https://github.com/user-attachments/assets/b74afede-7efc-480a-88cc-da0b56af99b5)

Zoomed out - on the left, the yellow area is not visible at all and on the right it overlaps over points 4 and 7:
![Screenshot 2024-10-14 at 13 09 22](https://github.com/user-attachments/assets/9009477c-da32-45cf-a8e3-bea5e97b17f0) ![Screenshot 2024-10-14 at 13 09 33](https://github.com/user-attachments/assets/8493993e-7a08-4b49-af12-eaea00b024d0)

### Expected Behavior

markArea should be scaled at the same rate as the barchart itself, so marked areas are always shown behind the same bars.

In the provided example, the bars at 5 and 6 should always have yellow background.

### Environment

```markdown
- OS: macOS Sonoma
- Browser: Firefox 131, Chrome 129, Safari 17.2.1
```

### Any additional comments?

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the linked minimal reproduction for ECharts 5.5.1 and reproduce the markArea displacement by resizing the chart or increasing numberOfPoints. Compare the markArea positions with the bars before and after resizing; done means the colored areas remain behind the same data points, including points 5 and 6, at different chart sizes.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.