tkdwns1245 opened a new issue, #21367:
URL: https://github.com/apache/echarts/issues/21367
### What problem does this feature solve?
**Summary**
Currently, the rectangle drag-to-zoom gesture seems to be tied to the
toolbox dataZoom feature. If I hide the toolbox button
(toolbox.feature.dataZoom.show = false), I can still zoom with the mouse wheel
via dataZoom: [{ type: 'inside' }], but I cannot drag-select a range to zoom.
I’d like to enable the same drag-to-zoom gesture without showing the toolbox
button.
**Use cases**
Clean/minimal UI where we don’t want any toolbar buttons.
Kiosk or embedded dashboards where gestures (wheel/drag) are preferred to
visible controls.
Custom toolbars that control zoom state, while keeping ECharts’ native
drag-zoom gesture.
**Current behavior**
dataZoom: [{ type: 'inside' }] enables wheel/pinch zoom and panning, but
there is no built-in rectangle drag gesture unless the toolbox dataZoom button
is visible and toggled.
**Desired behavior**
Provide a config to enable drag-to-zoom gesture independently of the toolbox
visibility.
Example: users can hold a modifier key (e.g., Shift) and drag to select a
window to zoom, or simply drag without a modifier (configurable).
**Live demo (CodeSandbox)**
Minimal repro: https://codesandbox.io/p/sandbox/dmwjy9
### What does the proposed API look like?
dataZoom: [{
type: 'inside',
dragToZoom: true, // NEW: enable rectangle drag zoom
dragModifierKey: 'shift', // 'none' | 'shift' | 'ctrl' | 'alt' (optional)
dragDirection: 'auto', // 'x' | 'y' | 'auto'
}]
(or) expose this via a new top-level interaction option:
interaction: {
dragZoom: { enable: true, modifierKey: 'shift', axis: 'x' }
}
Workarounds tried
dataZoom: [{ type: 'inside' }] → wheel zoom works, but no rectangle drag.
brush component can draw rectangles, but doesn’t behave like a smooth zoom
gesture and needs additional glue code.
Custom pointer handlers → re-implementing zoom logic becomes non-trivial
(coord transforms, axis sync, etc.).
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
