[Feature] Allow drag-to-zoom even when toolbox.feature.dataZoom.show is false
- Dominant language
- TypeScript
- Stars
- 67.3k
- Forks
- 19.8k
- Avg merge
- 11d 14h
- Merged PRs (30d)
- 8
Description
### 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.).
Contributor guide
Assessment
This issue has not been assessed yet.