apache
[Bug] markArea not displayed correctly when resizing
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:
- resize the chart area or adjust the 'numberOfPoints' variable in the example
- 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.
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:
Zoomed out - on the left, the yellow area is not visible at all and on the right it overlaps over points 4 and 7:
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
- OS: macOS Sonoma
- Browser: Firefox 131, Chrome 129, Safari 17.2.1
Any additional comments?
No response
markArea should be scaled at the same rate as the barchart itself, so marked areas are always shown behind the same bars.
Agree. I added the bug to the list in #20392. Strong suspicion that markArea visibility is related to visibility of xAxis labels. For instance 'yellow' shows up only with axis labels 5 to 7(6+1), 'red' - with labels 2 to 5(4+1), etc.
Workaround is to color bars instead of markArea - Demo.
I encountered the same issue: when the xAxis needs to display a large amount of data, the markArea settings fail to correspond to the actual display, resulting in positional offset or even disappearance.
