apache / apache/echarts

[Feature] Feature implementation question related to dataZoom.

Open
#21,246 0 comments 0 reactions 0 assignees View on GitHub
en new-feature pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### What problem does this feature solve?

I’m building a candlestick (K-line) chart with ECharts (in React) and have two related needs:

“Virtual focus” crosshair
I want to virtually focus a specific tick (not the real hover focus) and draw a crosshair at that index: a horizontal line at the close price and a vertical line at that time. In React I plan to keep the currently focused tick in state (e.g., useState) and pass it into the ECharts option.

Zoom via buttons, with “wheel-like” behavior
I’ll add two buttons: Zoom Out and Zoom In.

Does ECharts provide a simple “auto-zoom like mouse wheel” API for buttons?

If not, it seems I should call dispatchAction({ type: 'dataZoom', ... }) and manually adjust the current dataZoom range (start/end or startValue/endValue). What’s the recommended way to compute the new range so it feels as natural as wheel zoom?

Important requirement (clarification):
By default, when you hover a tick and use the mouse wheel, ECharts keeps that hovered tick visible during zooming. I’d like to replicate the same behavior when zooming via buttons, but using my virtually focused tick: no matter how I zoom in/out with the buttons, that focused tick must stay within the viewport.

Is there a built-in way to enforce this, or a recommended pattern (e.g., how to compute and set start/end or startValue/endValue) so that the focused tick remains in view during button-driven zooms, similar to the default wheel-zoom-on-hover behavior?

Thanks!

### What does the proposed API look like?

the same as above

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.