Lines and mark areas disappear during zooming

[dthunn]

Version

5.1.1

Steps to reproduce

While zooming on line graphs the lines break apart, this is same issue as https://github.com/apache/echarts/issues/3637. I have decided to submit this issue because that one is closed but the issue definitely still exists.

What is expected?

Lines stay connected after zooming.

What is actually happening?

Lines become disconnected while zooming

---

This issue has being going on for years it looks like, any help or a fix would be great.

[echarts-bot[bot]]

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 [email protected]. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe our mailing list.

Have a nice day! 🍵

[dthunn]

I have found the issue that causes it on my end, having yAxis type set to 'log' causes the bug, if I remove it, everything is fine. I would definitely like to keep the log scale on the y-axis is anyone has any ideas.

[locinus]

I indeed believe this issue still exists: markLines defined by two points disappear when zooming in, as at least one of the points is out of the zoomed window, and even with the filterMode: 'none' option.

A possible workaround could be to hook on the 'datazoom' event and save the zoom state:

const zoomState = {};

echartsInstance.on('datazoom', (event) => {
  const option = echartsInstance.getOption();
  if(option.dataZoom && Array.isArray(option.dataZoom) && option.dataZoom.length > 0) {
    zoomState.startValue = option.dataZoom[0].startValue;
    zoomState.endValue = option.dataZoom[0].endValue;
  }
});

and then proceed to recalculate the chart's options, using the zoomState.startValue and zoomState.endValue as the boundaries of the markLines (I would add +1 to the startValue and -1 to the endValue to make sure we're within the zoomed window). Not ideal, but does the job.

[kingyue737]

This bug still exists in v5.4.2. markline should not be filtered

[Zamlos]

This bug still exists. Please, reopen the ticket.

[Comee]

Below is a demo to show the problem.

Demo

[electroheadfx]

This demo @Comee show the MarkLine disappear when I zoom in. The issue still there.

[984803909]

The problem still exists. Is there any other alternative method for directly connecting the two points

[electroheadfx]

just use line series

[brianedwardsaunders]

this is a serious problem! It is possible to create a markLine with a single point that spans the entire xAxis (time series) where xAxis zoom works fine and the markLine doesn't disappear, but when you want to specify the start point and end of xAxis markLine, the markLine disappears when zooming in the xAxis and there is no solution Zoom filters options do not work!. Now I need to hack the solution, this issue has been open since 2021 and is still not resolved. Is a fix coming?

[electroheadfx]

maybe add it for 6.0 ?

[mimers]

it's 2024, and still not fixed.

[752841728]

This issue is not solved