[Bug] problem with zooming chart

[abcdefan]

Version

1.9.7

Current Behavior

Now when we hover the mouse over some tooltips we will get a chart, and when we scroll up and down on the chart, the chart will scale accordingly. In the code we set the minValueSpan to 180 days, and when we reach this minimum interval, we continue to try to scroll up to reduce the interval of the chart, and the chart will slide to the right (towards the latest date)

https://github.com/user-attachments/assets/3b2a94bd-6e4b-471a-b05c-edd81ea17c4b

Expected Behavior

When the date of the chart reaches minValueSpan, continue to try to slide the wheel up (to reduce the interval of the chart). At this time, we need to prevent the chart sliding to the right.

Environment

- OS: MacOS Sonoma M3
- Browser: Edge 127.0.2651.86

Any additional comments?

No response

[wangyantong2000]

https://echarts.apache.org/zh/option.html#dataZoom-inside You can try to solve this problem by reviewing the relevant configuration documents of echarts. But do we need to abandon mouse scrolling and add some other things. Will it make it cumbersome and bloated, we may also need someone with experience in the project to judge and make suggestions.@wxharry @tyn1998

[abcdefan]

I haven't solved the problem yet, but let me update the progress. This problem may not be a simple adjustment issue. Using the example from the documents of echarts, we can see that the code in datazoom is as same as our code. The extra end and minValueSpan are also required and are not causing the problem. The other methods mentioned in the documentation about type: inside don't solve our problem either. After I understood the logic of the code in the file StarChart.tsx, I commented out most of the code which won't cause this problem. My guess as to what is most likely causing the problem is the code in the image below.(Take the Star chart as an example, the codes are from the file StarChart.tsx and the file judge-interval.tsx) Now I'll keep trying to fix this.

[wangyantong2000]

Because the xAxis.type of the chart we are using is time, while the example you are looking at uses category. The answer about ChatGPT for time is: When ECharts' xAxis type is configured as' time ', the X-axis displays time series data. In this case, the chart can handle continuous time ranges, so when you scroll with the mouse, the chart will smoothly pan and display earlier or later time data. This continuity allows the chart to continuously shift until all data is displayed.

[wxharry]

https://echarts.apache.org/zh/option.html#dataZoom-inside You can try to solve this problem by reviewing the relevant configuration documents of echarts. But do we need to abandon mouse scrolling and add some other things. Will it make it cumbersome and bloated, we may also need someone with experience in the project to judge and make suggestions.@wxharry @tyn1998

I would say we should not abandon mouse scrolling completely at this stage. My recommendation is to keep the functionality to zoom on scrolling, and make it move on shift + scrolling.

[wangyantong2000]

https://echarts.apache.org/zh/option.html#dataZoom-inside You can try to solve this problem by reviewing the relevant configuration documents of echarts. But do we need to abandon mouse scrolling and add some other things. Will it make it cumbersome and bloated, we may also need someone with experience in the project to judge and make suggestions.@wxharry @tyn1998

I would say we should not abandon mouse scrolling completely at this stage. My recommendation is to keep the functionality to zoom on scrolling, and make it move on shift + scrolling.

I tried it briefly before, and when I reached the maximum, scrolling would cause the chart to move to the right. After modifying the echarts configuration, moving to the right still exists. Shift+scrolling only changes normal right movement to left movement.

[wangyantong2000]

If the feature of type time as mentioned by chatgpt is that it will move with the scroll wheel. One idea I mentioned privately yesterday is whether we can change the type from time to category, and then modify the format of the x-axis to the format we want, as well as some data format transformations after zooming in and out. Or any other feasible attempts are also possible.

[wxharry]

I tried it briefly before, and when I reached the maximum, scrolling would cause the chart to move to the right. After modifying the echarts configuration, moving to the right still exists. Shift+scrolling only changes normal right movement to left movement.

Just tried. Yes, you are right, it kept going right even when I disabled the zooming. This looks like a bug to me TBO. Could someone do research why echarts have this?

If the feature of type time as mentioned by chatgpt is that it will move with the scroll wheel. One idea I mentioned privately yesterday is whether we can change the type from time to category, and then modify the format of the x-axis to the format we want, as well as some data format transformations after zooming in and out. Or any other feasible attempts are also possible.

Yes, I also believe making it 'category' is feasible if there is no other way. I kinda like 'time' better than 'category'. I know we can cutomize x-axis but I don't think this tiny problem is worth our efforts to make that change. I can bear with it if it is coming from echarts.

Or, can we change the behavior this way? Zooming with ctrl + scrolling and moving with scrolling. Looks like this can avoid the bug.