[Bug] Interrupted lines can draw ghost lines

[YaTaUser]

Version

6.0.0

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?c=line-simple&code=bVA9C8IwEN39Fbd16WD8NuLg6Cw4WDoEGyRQk9JGaZH-d1_SWK0aeCH3Lu_u3ZnCKqNpS48RUb2rVcX9k8g2heQUnYWVF1M2UezZTFjBKaFxTMSACTAFZl36deagFsASWAHrQZpBzaBmUDOo2UCd4t06wvU6GXP9cqR0pTIZ_HjLe53JmsOTp65KH0V-k4dCaO56dayo_7CVFaX1PMcYXePmzxbu7ktoifrhs6_KafkyXMlSSUgTn-sK9CvrJ0xmMc3T98QJljSI3Wp-CH3L808O2118xmsXh7Dng_tcaRl5qsWdjtrNEw&enc=deflate

Steps to Reproduce

Opening sandbox code should show this, two lines in one graph. Lower line with 3 data points, then an interruption with a null data point, then the upper line with 2 data points.

Scrolling to the right (note the numbers on the x-axis) makes the third data point of the lower line disappear. Instead, a ghost line connecting the second data point of the lower line and the first data point of the upper line appears:

Current Behavior

The ghost line appears. Apparently, all data points outside the visible range get totally ignored, even if they're data points for interrupting lines.

Expected Behavior

Lines should stay interrupted, no ghost line appearing.

Environment

- OS: Debian 13
- Browser: Firefox 140 ESR
- Framework: (none)

Any additional comments?

No response

[YaTaUser]

Issue #21564 has likely a similar root cause. It's about the bug making the line between data point 2 and 3 disappear, despite a part of it should be visible.

[helgasoft]

dataZoom filterMode:'none' will fix it visually. Logically - you have a point.

[YaTaUser]

Thanks for the hint! Didn't expect such a configuration to exist.

filterMode: 'none' indeed works for this simple example. In my real-world application it totally messes up zooming. For example, y-axis then zooms to all available data, even to data points far outside the visible range. Also, candlesticks then all draw as a thin line, even when they draw > 10 px thick in other filter modes (~3500 candles total, view 800 px wide, 35 candles visible).

Filter modes 'filter', 'weakFilter':

 

Filter modes 'empty', 'none':

---

It looks like ECharts uses the same data subset for zooming and drawing. This could be done better:

– Filter like the current default to calculate axis scales and size of the graphics elements to be drawn.
– For actual drawing, always use all available data.
– With this implemented, one can probably drop that filterMode configuration item, no need to bother users with that.
– To speed up drawing straight lines, one can filter out graphics elements where both ends lie on the same side outside the visible range (for drawing curves it's more complicated).

That last point sounds similar to documentation for weakFilter. I can't find a behavior distinction between filter and weakFilter, though. Neither in the small example here, nor in my real world application.

[helgasoft]

y-axis then zooms to all available data, even to data points far outside the visible range

yes, this is by design for filterMode:'none'. Here is a workaround with a second dataZoom - Demo

About "candlesticks then all draw as a thin line" - it is abnormal, maybe take a second look at your settings.

[YaTaUser]

Well, with a second filter mode I'm back to square one. Partial lines vanish entirely. In your demo as well, it's more obvious when changing coordinates of that green extra line to [[60,5555],[89,6666]].

---

An actual workaround is to draw longer lines in single steps and to put an interrupt on both ends of each segment and between each step. This way required interrupts no longer get filtered away. Demo for this. It gets more complicated when zooming in both directions. Lots of code and still not perfect, because longer line still end at its last visible category instead of the view's edge, but it's close.

---

Anyways, I opened this bug not to find help, but to make Echarts developers aware of the problem and to give them a simple use case. Here's a slightly enhanced use case, now including a demonstration of the unwanted zooming side effect:

https://echarts.apache.org/examples/en/editor.html?c=line-simple&code=bVK5bsJAEO35iuloEOAESHCUImWKVDmKICRWeAgjrXeRvYCtiH_P8_qIbbA01sybN_fagxNr6Jl-B0TZSyZp6FUilx84pOFWOf6xST4ceTRSToW0oumIKIDcQe4hs9Jdf3NAC8gD5BGy7LgDRAeIDhAdIDroRK-hXwqgqPVtbdzrSEwqEVf9-JZfTcRZiJ48FIv5UvrI7wdlwqJWiarsBpo6lTiPhxjDQ5MJfZqtjWM2jtxeUnKWUmY673PaiXacUGwjrskbYw1vCDxjqVznmOhjzyRGnChNJ-FzzQbtpFKnc4pkt-MERcaVr8z9htQYskjqR8Qm8htnORU91wTMwYkwOCvPKZnNsZrdrqaj6fp_1TBp3gfMUes2NAOnbeOiHbu44xXQT4KnsGjby7bdKNVoWjC6hy74rweXpz8&enc=deflate

Thanks for helping and an even bigger thank you, in advance, for fixing this issue.