The problem appears when there are a lot of points on the chart, and the window size is small enough.
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.
Zoomed out - on the left, the yellow area is not visible at all and on the right it overlaps over points 4 and 7:
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.
- OS: macOS Sonoma
- Browser: Firefox 131, Chrome 129, Safari 17.2.1
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:
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
Any additional comments?
No response