apache
[Feature] Allow drag-to-zoom even when toolbox.feature.dataZoom.show is false
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.).
